如何在Angular Js指令中部分调用控制器答案

【问题标题】：how to invoke controller in partial in Angular Js directive如何在Angular Js指令中部分调用控制器
【发布时间】：2014-09-19 09:58:51
【问题描述】：

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

【问题讨论】：

我没有看到 headendList 函数在任何地方被调用。如果您不调用它，value 属性将永远不会添加到scope。尝试在HeadCtrl 末尾添加$scope.headendList();。
没有它也不能工作
你能提供一个 plunker 或 jsfiddle 吗？另外，发布tabset.html 内容。
它现在可以工作了，问题只出在代码中，我正在分享问题的链接

标签： angularjs angular-directive

【解决方案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';
});

【讨论】：