如何防止在指令 n Angular 之间共享范围? [英] How to prevent that a scope is shared among directives n Angular?

问题描述

我的所有指令都使用相同的作用域，我希望我的指令能够独立运行.

指令:

app.directive('headerSort', function () {返回 {限制:'A'，控制器:函数($scope，$element，$attrs){$scope.caption = $attrs.caption;$scope.doSort = 函数 () {$scope.orderField = $attrs.headerSort;$scope.reverse = !$scope.reverse;};},模板:'<div data-ng-click="doSort();">'+'{{标题}}' +'<i class="icon-sort"></i>'+'</div>'};});

HTML:

结果是所有列都具有值 'Age' 并按 Age 排序.我当然希望每一列都对它自己的列进行排序.我怎样才能做到这一点?

更新:忘了说 orderField 和 reverse 用在 ng-repeat | 中orderBy:

解决方案

指令的每个实例都需要有自己的标题、排序类型和反向属性.所以指令将需要它自己的(子)范围 —隔离范围 (scope: {}) 或新范围 (scope: true).由于指令不是独立/自包含的组件，我不会使用隔离范围(另请参见 在 AngularJS 中编写指令时，我如何决定是否需要新的作用域，一个新的子作用域，还是一个新的独立作用域?).

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

app.directive('headerSort', function () {返回 {scope: true,//创建一个新的子作用域链接:函数(范围、元素、属性){scope.caption = attrs.caption;scope.sortType = attrs.headerSort;scope.reverse = false;},模板:'<div data-ng-click="reverse=!reverse; doSort(sortType, reverse);">'+'{{caption}}

'};});

function MyCtrl($scope) {$scope.orderField = "名字";$scope.reverse = false;$scope.customers = [ {FirstName: 'Martijn', Age: 22}, {FirstName: 'Mark', Age: 44}];$scope.doSort = 函数(排序类型，反向){console.log('排序',sortType, reverse);$scope.orderField = sortType;$scope.reverse = 反向；};}

<th data-header-sort="FirstName" data-caption="First name"></th><th data-header-sort="Age" data-caption="Age"></th><tbody id="customerRows" data-ng-repeat="customer in customers | orderBy:orderField:reverse"><tr><td>{{customer.FirstName}}<td>{{customer.Age}}</tbody>

fiddle 在小提琴中，为了简单起见，我做了不包括全名列.

All my directives use the same scope and I want my directives to operate by their own.

Directive:

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

Html:

<th data-header-Sort="FullName" data-caption="Full name"></th>
<th data-header-Sort="FirsName" data-caption="First name"></th>
<th data-header-Sort="Age" data-caption="Age"></th>

The result is that all the columns has the value 'Age' and sort by Age. I want of course that every column sort it's own column. How can I achieve this?

UPDATE: Forgot to mention that orderField and reverse are used in the ng-repeat | orderBy:

<tbody id="customerRows" data-ng-repeat="customer in customers | orderBy:orderField:reverse">

解决方案

Each instance of your directive needs to have its own caption, sort type, and reverse property. So the directive will need its own (child) scope — either an isolate scope (scope: {}) or a new scope (scope: true). Since the directive is not a standalone/self-contained component, I would not use an isolate scope (see also When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?).

With the type of scope selected for the directive, the sort type and reverse values can be passed to the parent via function arguments, or they can be set on parent scope directly. I suggest function arguments:

app.directive('headerSort', function () {
    return {
        scope: true,   // creates a new child scope
        link: function (scope, element, attrs) {
            scope.caption  = attrs.caption;
            scope.sortType = attrs.headerSort;
            scope.reverse  = false;
        },
        template: '<div data-ng-click="reverse=!reverse; doSort(sortType, reverse);">' +
             '{{caption}}</div>'
    };
});

function MyCtrl($scope) {
    $scope.orderField = "FirstName";
    $scope.reverse    = false;
    $scope.customers  = [ {FirstName: 'Martijn', Age: 22}, {FirstName: 'Mark', Age: 44}];
    $scope.doSort = function (sortType, reverse) {
        console.log('sorting',sortType, reverse);
        $scope.orderField = sortType;
        $scope.reverse    = reverse;
    };
}

<table>
    <th data-header-sort="FirstName" data-caption="First name"></th>
    <th data-header-sort="Age" data-caption="Age"></th>
    <tbody id="customerRows" data-ng-repeat="customer in customers | orderBy:orderField:reverse">
        <tr><td>{{customer.FirstName}}<td>{{customer.Age}}
    </tbody>
</table>

fiddle In the fiddle, just for simplicity, I did not include the FullName column.

这篇关于如何防止在指令 n Angular 之间共享范围?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！