问题描述:

I have the following HTML:

<div ng-controller="MainController">

<div class="words">

<span ng-repeat="word in words" ng-click="setActiveWord(word)"> {{word.name}}</span>

</div>

<tabset>

<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">

{{activeWord.name}}

</tab>

</tabset>

</div>

Then I have a definition for the MainController which adds tabs property to the scope:

.controller('MainController', ['$scope', function($scope) {

$scope.setActiveWord = function(word) {

$scope.tabs[0].active = true;

}

$scope.tabs = [

{ title:'Dynamic Title 1', content:'Dynamic content 1' },

{ title:'Dynamic Title 2', content:'Dynamic content 2' }

];

}]);

Then tabset directive from here also introduces its own controller TabsetController which also defines the tabs property on the scope:

.controller('TabsetController', ['$scope', function TabsetCtrl($scope) {

var ctrl = this,

tabs = ctrl.tabs = $scope.tabs = [];

Which contoller's tabs property will be used for the element?

Please see this Plunker for complete example.

相关阅读:
Top