Защо в тази директива моят ъглов обхват не е ограничен? - ъглови, обхват, директива

По-долу имам следните директиви, които създаватфункционалност на раздела. За съжаление, когато създавам няколко случаите на тези раздели нещата се объркват. Първият набор от раздели само превключва дисплея на втория набор от раздели. Какво липсвам?

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

Отговори:

Трябва да добавите изолиран (или детски) обхват в директивата за разделите.

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

Това е така, защото сега използвате родителяобхват и затова пренебрегват свойствата на панелите на това поле за всяка директива за разделите, която използвате. Ако използвате изолиран обхват, създавате нов масив от панели за всяка директива за разделите.

Вижте актуализираната цигулка: http://jsfiddle.net/basslagter/U3pVM/19287/

Можете също да отидете с домейн на дете, но това зависи от това дали искате да използвате свойствата на родителския обхват. Аз ще отида с изолиран обхват за сега.

Задайте обхват: true, в раздели!

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

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

Това създава детски обхват и ако искате да бъде изолиран, използвайте -

 scope: {},