0

タブのディレクティブを作成しました。静的コントローラーでは正常に機能しますが、テンプレートのいずれかにコントローラーを追加しても何も表示されません。

私のタブディレクティブはここにあります

angular.module('nsTab', [])
    .directive('nsTabset',  function() {

    return {
        restrict: 'E',
        scope: {
            tabs: '=tabs'
        },
        transclude: true,
        link: function($scope, element, attributes) {
              $scope.currentTab = $scope.tabs[0].url;

        },
        controller: function($scope, $element){

            $scope.activateTab = function(tab){

                $scope.currentTab  = tab.url;
            }
        },
        templateUrl: 'modules/common/views/tabset.html'
    };
});

ローカル スコープ

$scope.tabs = [
    {name: 'Headends', url: 'modules/lineup/views/ShowSystem/head.html', isActive: true},
    {name: 'Contacts', url: 'modules/lineup/views/ShowSystem/contacts.html'}
]

html のディレクティブ

<ns-tabset tabs="tabs"></ns-tabset>

head.html の内容

<div ng-controller="HeadCtrl">{{value}}</div>

SystemHeadendCtrl.js

angular.module('myMod').controller('HeadCtrl', function($scope, Restangular) {
    $scope.headendList = function(){
        $scope.myData = [{name: "Moroni", age: 50},
                         {name: "Tiancum", age: 43},
                         {name: "Jacob", age: 27},
                         {name: "Nephi", age: 29},
                         {name: "Enos", age: 34}];
        $scope.value= 10;
        $scope.gridOptions = { data: 'myData' };
    }
});

そのタブがアクティブな場合、head.htmlには何も表示されません。

4

1 に答える 1

0

問題はコードのみにあり、タブコントロールのコードを共有しています

http://plnkr.co/edit/SAeRZDp1vg7xxmCdG6Vv

var app = angular.module('plunker', ['nsTab']);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
   $scope.tabs = [
                {name: 'Head', url: 'head.html', isActive: true},
                {name: 'Tail', url: 'tail.html'},

            ]

});


angular.module('nsTab', [])
    .directive('nsTabset',  function() {

    return {
        restrict: 'E',
        scope: true,
        transclude: true,
        link: function($scope, element, attributes) {
              $scope.currentTab = $scope.tabs[0].url;

        },
        controller: function($scope, $element){

            $scope.activateTab = function(tab){

                $scope.currentTab  = tab.url;
            }
        },
        templateUrl: 'tabset.html'
    };
});

app.controller('MyCtrl', function($scope) {
 $scope.test = 'testing';
});
于 2014-09-22T06:42:39.930 に答える