Angularjs 如何防止指令之间共享作用域？

我的所有指令都使用相同的作用域，我希望我的指令能够自己操作

指令：

app.directive('headerSort', function () {
    return {
        restrict: 'A',
        controller: function ($scope, $element, $attrs) {
            $scope.caption = $attrs.caption;

            $scope.doSort = function () {
                $scope.orderField = $attrs.headerSort;
                $scope.reverse = !$scope.reverse;
            };
        },
        template: '<div data-ng-click="doSort();">' +
                    '{{caption}}' +
                    '<i class="icon-sort"></i>' +
                  '</div>'
    };
});

您需要“隔离”您的范围。这将为指令的每个实例提供其自己的范围。将以下内容添加到指令定义中：

scope: {},

因此，您的最终指令定义如下所示：

app.directive('headerSort', function () {
    return {
        restrict: 'A',
        scope: {},
        controller: function ($scope, $element, $attrs) {
            $scope.caption = $attrs.caption;

            $scope.doSort = function () {
                $scope.orderField = $attrs.headerSort;
                $scope.reverse = !$scope.reverse;
            };
        },
        template: '<div data-ng-click="doSort();">' +
                    '{{caption}}' +
                    '<i class="icon-sort"></i>' +
                  '</div>'
    };
});

app.directive（'headerSort'，function（）{
返回{
限制：“A”，
作用域：{}，
控制器：函数（$scope、$element、$attrs）{
$scope.caption=$attrs.caption；
$scope.doSort=函数（）{
$scope.orderField=$attrs.headerSort；
$scope.reverse=！$scope.reverse；
};
},
模板：“”+
“{{caption}}”+
'' +
''
};
});

Igghead.io视频深入研究了范围隔离。您可以在此处查看它们：

---

独立作用域视频从教程#16开始。

指令的每个实例都需要有自己的标题、排序类型和反向属性。因此，指令将需要自己的（子）作用域—一个隔离作用域（

scope:{}

）或一个新作用域（

scope:true

）。由于该指令不是独立/自包含的组件，因此我不会使用隔离作用域（另请参见）

在为指令选择作用域类型后，排序类型和反向值可以通过函数参数传递给父级，也可以直接在父级作用域上设置。我建议函数参数：

app.directive（'headerSort'，function（）{
返回{
scope:true，//创建一个新的子作用域
链接：函数（范围、元素、属性）{
scope.caption=attrs.caption；
scope.sortType=attrs.headerSort；
scope.reverse=false；
},
模板：“”+
“{{caption}}”
};
});

函数MyCtrl（$scope）{
$scope.orderField=“FirstName”；
$scope.reverse=false；
$scope.customers=[{FirstName:'Martijn'，年龄：22}，{FirstName:'Mark'，年龄：44}]；
$scope.doSort=函数（排序类型，反向）{
console.log（'sorting'，sortType，reverse）；
$scope.orderField=sortType；
$scope.reverse=反向；
};
}

{{customer.FirstName}{{customer.Age}

---

为了简单起见，我没有在fiddle中包含全名列。

Thanx。列名没有正确显示，但单击仍然不起作用。如果让它更容易，我不知道doSort在哪里。在控制器作用域或指令的控制器作用域中。

$scope.orderField

将在隔离作用域上设置属性，而不是父作用域，因此这不起作用。马克，你是对的，你可能最好使用子作用域。你可能对AngularUI的ng grid指令感兴趣@谢谢！也为链接和进一步的解释！

scope: {},

app.directive('headerSort', function () {
    return {
        restrict: 'A',
        scope: {},
        controller: function ($scope, $element, $attrs) {
            $scope.caption = $attrs.caption;

            $scope.doSort = function () {
                $scope.orderField = $attrs.headerSort;
                $scope.reverse = !$scope.reverse;
            };
        },
        template: '<div data-ng-click="doSort();">' +
                    '{{caption}}' +
                    '<i class="icon-sort"></i>' +
                  '</div>'
    };
});