gpt4 book ai didi

javascript - ng-controller 不适用于 kendo tabstrip 选项卡内容

转载 作者:行者123 更新时间:2023-11-28 05:16:15 30 4
gpt4 key购买 nike

ng-controller 不适用于 kendo tabstrip 选项卡内容。请检查下面我的代码。

<!--tabstripCtrl.js-->
angular.module('tabstripApp',[]);

var app = angular.module('tabstripApp');

app.controller('tabCtrl',['$scope',function($scope){
$('#tabstrip').kendoTabStrip({
contentUrls:[
'views/gridview1.html',
'views/gridview2.html',
'views/gridview3.html',
]
});
}]);

<!--grid1Ctrl.js-->
var app = angular.module('tabstripApp');

app.controller('grid1Ctrl',['$scope',function($scope){
$scope.grid1 = "grid1";
}]);
<!--index.html-->
<html>
<head>
<link rel="stylesheet" href="css/kendo.common.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="controllers/tabstripCtrl.js"></script>
<script src="controllers/gridCtrl.js"></script>
</head>

<body ng-app="tabstripApp" ng-controller='tabCtrl'>
<div id='tabstrip'>
<ul>
<li class="k-state-active">grid1</li>
<li>grid2</li>
<li>grid3</li>
</ul>
<div ng-controller="grid1Ctrl"></div>
<div ng-controller="grid2Ctrl"></div>
<div ng-controller="grid3Ctrl"></div>
</div>
</body>
</html>

<!--gridview1.html-->
<div>
<span>{{grid1}}</span>
</div>

由于每个选项卡内容都非常复杂,所以我创建单独的 html 文件来维护它们。但是,grid1Ctrl、grid2Ctrl 和 grid3Ctrl 绑定(bind)不起作用,有什么想法吗?

最佳答案

  <div ng-controller="myController">
<div id="tabstrip" kendo-tab-strip="tabstrip">
<ul>
<li class="k-state-active">grid1</li>
<li>grid2</li>
<li>grid3</li>
</ul>
<div ng-controller="grid1Ctrl">
{{grid1}}
</div>
<div ng-controller="grid2Ctrl">
{{grid2}}
</div>
</div>
</div>

<强> DEMO

关于javascript - ng-controller 不适用于 kendo tabstrip 选项卡内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40966808/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com