为什么我的角度范围不受此指令限制？

Question

我在创建标签功能的以下指令下面。 不幸的是，当我创建这些选项卡的多个实例时，出现了问题。 第一组选项卡仅切换第二组选项卡的显示。 我想念什么？

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

Answer 1

您需要在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
    };
});

这是因为您现在正在使用父作用域，因此对于您使用的每个tab指令，都将覆盖该作用域上的panel属性。 如果使用隔离范围，则为每个tabs指令创建一个新的面板数组。

请参阅更新的小提琴： http : //jsfiddle.net/basslagter/U3pVM/19287/

您还可以使用子作用域，但这取决于您是否要使用父作用域的属性。 我现在将使用隔离范围。

Answer 2

设置范围：true，在选项卡上！

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

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

这会创建一个子作用域，如果希望将其隔离，请使用-

 scope: {},