[英]ng-controller doesn't work for kendo tabstrip tab content
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绑定不起作用,有什么想法?
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.