剣道タブストリップのタブコンテンツで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バインディングは動作しません。
あなたは – Sajeetharan
@Sajeetharanやあ、更新され、私の前にタブのコンテンツのビューとコントローラをアップロードしていないが、私はそれらを定義し、それらを定義していないので。 – Allen4Tech
私はあなたが何かを見逃していると思う、あなたはプランカーを作成することができます – Sajeetharan