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

【问题标题】：ng-controller doesn't work for kendo tabstrip tab contentng-controller 不适用于 kendo tabstrip 选项卡内容
【发布时间】：2016-12-05 03:51:01
【问题描述】：

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

【问题讨论】：

因为你还没有定义它们
@Sajeetharan 嗨，更新了，我之前没有上传标签内容的视图和控制器，但我定义了它们。
我觉得你遗漏了一些东西，你能创建一个 plunker
@Sajeetharan 嗨，由于某些原因，我无法上传演示代码。我再次编辑了这个问题，这足以重现这个问题。有任何想法吗？谢谢！

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

【解决方案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

【讨论】：

谢谢，我知道这行得通。但是我不想直接把tab的内容放到index文件里，因为每一个内容都很复杂，会让index文件变得很大。所以我使用 ContentUrls 从不同的文件中加载内容。控制器绑定不适用于单独的内容文件。您可以通过我的邮政编码重现该问题。
@Allen4Tech 那么你需要使用路由机制。检查样本plnkr.co/edit/peXM2XSosnWnBgmp1fty?p=preview
谢谢！但是如何防止选择的路径显示在url中呢？
可以在路由中配置url参数，如果有帮助则标记为答案