2016-12-05 20 views
1

剣道タブストリップのタブコンテンツでng-controllerが機能しません。以下の私のコードを確認してください。剣道タブストリップのタブコンテンツにng-controllerが機能しない

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

各タブの内容は非常に複雑であるので、私はそれらをmaintanするために別のHTMLファイルを作成しますので。しかし、grid1Ctrl、grid2Ctrlとgrid3Ctrlバインディングは動作しません。

+0

あなたは – Sajeetharan

+0

@Sajeetharanやあ、更新され、私の前にタブのコンテンツのビューとコントローラをアップロードしていないが、私はそれらを定義し、それらを定義していないので。 – Allen4Tech

+0

私はあなたが何かを見逃していると思う、あなたはプランカーを作成することができます – Sajeetharan

答えて

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

+0

ありがとう、私はこの作品を知っています。しかし、私は、各コンテンツが非常に複雑でインデックスファイルを非常に大きくするので、インデックスファイルにタブコンテンツを直接入れたくありません。だから私はContentUrlsを使って別のファイルからコンテンツを読み込みます。コントローラーのバインドは、別のコンテンツファイルでは機能しません。あなたは自分の郵便番号で問題を再現することができます。 – Allen4Tech

+0

@ Allen4Techその後、ルートメカニズムを使用する必要があります。サンプルを確認してくださいhttp://plnkr.co/edit/peXM2XSosnWnBgmp1fty?p=preview – Sajeetharan

+0

ありがとう!しかし、どのようにURLで選択されたパスの表示を防ぐには? – Allen4Tech

関連する問題