Pourquoi ma portée angulaire n'est-elle pas limitée dans cette directive? - angularjs, scope, directive

J'ai les directives suivantes ci-dessous qui créentfonctionnalité de l'onglet. Malheureusement, quand je crée plusieurs des cas de ces onglets les choses vont mal. Le premier jeu d'onglets permet uniquement de changer l'affichage du second jeu d'onglets. Qu'est-ce que je rate?

http://jsfiddle.net/U3pVM/19281/

core.directive("pane", function () {
return {
require: "^tabs",
restrict: "A",
transclude: true,
scope: {
title: "@"
},
link: function (scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
},
template:
"<div class="tab-pane" ng-class="{active: selected}"" +
"ng-transclude></div>",
replace: true
};
});

core.directive("tabs", function () {
return {
restrict: "A",
transclude: true,
//$scope is injected in to a controller via dependency injection hence the use of $scope not scope
controller: function ($scope, $element) {
var panes = $scope.panes = [];

$scope.select = function (pane) {
angular.forEach(panes, function (pane) {
pane.selected = false;
});
pane.selected = true;
};

this.addPane = function (pane) {
if (!panes.length) $scope.select(pane);
panes.push(pane);
};
},
template:
"<div class="tabs">" +
"<ul class="nav nav-tabs">" +
"<li ng-repeat="pane in panes"" +
"ng-class="{active:pane.selected}">" +
"<a href="" ng-click="select(pane)">{{pane.title}}</a>" +
"</li>" +
"</ul>" +
"<div class="tab-content" ng-transclude></div>" +
"</div>",
replace: true
};
});

Réponses:

Vous devez ajouter une portée isolée (ou enfant) à la directive tabs.

core.directive("tabs", function () {
return {
restrict: "A",
transclude: true,
scope: {}, // <== here it is!
controller: function ($scope, $element) {
var panes = $scope.panes = [];

$scope.select = function (pane) {
angular.forEach(panes, function (pane) {
pane.selected = false;
});
pane.selected = true;
};

this.addPane = function (pane) {
if (!panes.length) $scope.select(pane);
panes.push(pane);
};
},
template: "",
replace: true
};
});

C'est parce que vous utilisez maintenant le parentscope et, par conséquent, redéfinissent la propriété panels sur cette étendue pour chaque directive tabs que vous utilisez. Si vous utilisez une étendue isolée, vous créez un nouveau tableau de panneaux pour chaque directive tabs.

Voir le violon mis à jour: http://jsfiddle.net/basslagter/U3pVM/19287/

Vous pouvez également utiliser une étendue enfant, mais cela dépend de l'utilisation ou non des propriétés de l'étendue parent. J'irais avec une portée isolée pour le moment.

Définissez la portée: true, sur des onglets!

http://jsfiddle.net/U3pVM/19289/

 return {
restrict: "A",
transclude: true,
scope: true,  <<missing this

Cela crée une portée enfant, et si vous voulez qu'elle soit isolée, utilisez -

 scope: {},