ng-controller doesn't work for kendo tabstrip tab content
Question
ng-controller doesn't work for kendo tabstrip tab content. Please check my code below.
<!--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>
Since each tab content is very complex, so I create separate html file to maintan them. But, the grid1Ctrl, grid2Ctrl and grid3Ctrl binding don't work, any ideas?
1 answers
solution1
0 ACCPTED 2016-12-05 07:01:04
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
angularjs ng-controller doesn't work
ng-controller doesn't work even through it is called correctly
How to bind angular controller to the tab content in kendo tabstrip
ng-include inside ng-controller doesn't work correctly
Why ng-controller and ng-repeat doesn't work together inside same tag in Angular JS?
Kendo Tabstrip Doesn't Load First Tab Properly
ng-controller and ui-view doesn't work on the same element
Dynamically Inserted Kendo tabStrip tab not loading a content div
Cannot get ng-controller to work in angular app
Why isn't my ng-controller being called?
Related Tags