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選項卡內容

問題描述

1 個解決方案

解決方案1
0 已采納 2016-12-05 07:01:04

ng-controller不適用於kendo tabstrip選項卡內容

問題描述

1 個解決方案

解決方案1 0 已采納 2016-12-05 07:01:04

解決方案1
0 已采納 2016-12-05 07:01:04