1

私のメインページには、タブアイテムが動的にロードされるタブストリップがありますが、angularjsはタブアイテムに関連するコントローラーをロードしません。

私のコードは次のようなものです：

var tabStripElement = $("#tabstrip").kendoTabStrip({
animation: {
    open: {
        effects: "fade"
    }
},
dataTextField: 'text',
dataContentField: 'content',
dataImageUrlField: 'dataImageUrl',
dataUrlField: 'url',
dataContentUrlField: 'contentUrl',
});
tabStripElement.parent().attr("id", "tabstrip-parent");
var tabStrip = tabStripElement.data("kendoTabStrip");


angular.module('myApp', []).controller('MainController', ['$scope', function($scope){
 $scope.openTab()
 {
    tabStrip.append({
    text: 'Title',
    contentUrl: '/tabItem.html',
     encoded: false
    });
   }
}])
.controller('TabController', ['$scope', function($scope){
 }])

メインページ：

<html ng-app="myApp">
   <head>
     <meta charset="utf-8">
     <link href="~/Content/kendo/2016.1/kendo.common.min.css" rel="stylesheet" />
     <link href="~/Content/kendo/2016.1/kendo.default.min.css" rel="stylesheet" />
  </head>
 <body ng-controller="MainController">
    <div  id="tabstrip" class="text-right">
    </div>
   <script src="~/Scripts/lib/jquery/jquery-1.12.0.js"></script>
   <script src="~/Scripts/lib/angular/angular.js"></script>
   <script src="~/Scripts/lib/angular/angular-resource.js"></script>
   <script src="~/Scripts/lib/kendo/2016.1/kendo.all.min.js"></script>
   <script src="~/Scripts/js/app.js"></script>
   <script src="~/Scripts/js/controllers.js"></script>
  </body>
 </html>

タブのビューは次のようになります。

<div ng-controller="TabController">
   <input type="text" />
</div>
4

0 に答える 0