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

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

这是因为您现在正在使用父作用域，因此覆盖了该作用域上您使用的每个选项卡指令的面板属性。如果您使用独立范围，则为每个选项卡指令创建一个新的面板数组。

查看更新后的 fiddle：http://jsfiddle.net/basslagter/U3pVM/19287/

您也可以使用子范围，但这取决于您是否要使用父范围的属性。我现在会选择隔离范围。

Answer 2

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

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

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

这会创建一个子作用域，如果您希望它是独立的，请使用 -

 scope: {},

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

Why isn't my angular scope restricted in this directive?

scope

directive

angularjs