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

时间:2016-12-05 03:51:02

标签: javascript angularjs kendo-ui telerik kendo-tabstrip

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";
}]);
&#13;
<!--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>
&#13;
&#13;
&#13;

由于每个标签内容都非常复杂,因此我创建了单独的html文件来保存它们。但是,grid1Ctrl,grid2Ctrl和grid3Ctrl绑定不起作用,有什么想法吗?

0 个答案:

没有答案