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

Question

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 绑定不起作用，有什么想法吗？

Answer 1

  <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

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

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

javascript

telerik

kendo-ui

angularjs

kendo-tabstrip