javascriptangularjskendo-uitelerikkendo-tabstrip

ng-controller doesn't work for kendo tabstrip tab content


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?


Solution

  •   <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