如何在Angular Js指令中部分調用控制器

我爲Tab創建了一個指令，它對靜態控制器很好地工作，但是當添加控制器到模板中的任何一個時，它不會顯示任何內容。如何在Angular Js指令中部分調用控制器

我的標籤指令是這裏

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當標籤被激活。

來源

2014-09-19 rajansoft1

我沒有看到'headendList'功能被稱爲任意位置的代碼。如果你不調用它，'value'屬性將永遠不會被添加到'scope'中。嘗試在'HeadCtrl'的末尾添加'$ scope.headendList（）;'。 – bmleite 2014-09-19 10:13:48

它不能工作W/O它 – rajansoft1 2014-09-19 10:59:11

你可以提供一個plunker或jsfiddle？另外，發佈'tabset.html'內容。 – bmleite 2014-09-19 12:46:11

的問題是在代碼中唯一的，我共享選項卡控制

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-22 06:42:39 rajansoft1

如何在Angular Js指令中部分調用控制器

回答

相關問題