angularjs - 如何在Angular Js指令中部分调用控制器

Question

我为 Tab 创建了一个指令，它对静态控制器工作正常，但是当将添加控制器添加到任何一个模板时，它什么都不显示。

我的 Tab 指令在这里

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 中显示任何内容。

Answer 1

问题仅在代码中，我正在共享选项卡控件的代码

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';
});