javascript - Angular 范围绑定(bind) &(&) 是一次性绑定(bind)吗？

Question

Angular 范围绑定(bind) &(&) 是一次性绑定(bind)吗？我看到它被称为单向绑定(bind)，但它也是一次性的吗？

假设我有:

<my-custom-directive data-item="item" />

我的指令声明如下:

.directive('myCustomDirective', [
'$log', function ($log) {
return {
    restrict: 'E',
    templateUrl: '/template.html',
    scope: {
        dataItem: '&'
    }
    controller: function ($scope) {
        // ....
    }
}])

我问绑定(bind)是否是一次性的原因是因为这似乎是我正在观察的，也就是说。如果更新了父作用域中的 item，则不会更新指令中的项目。

我说绑定(bind)是一次性的对吗？

为了实现我想要的，指令在不影响父作用域项的情况下保留副本——我这样做了:

.directive('myCustomDirective', [
'$log', function ($log) {
return {
    restrict: 'E',
    templateUrl: '/template.html',
    scope: {
        dataItemOriginal: '='
    },
    link: function ($scope) {
        $scope.$watch('dataItemOriginal', function () {
            $scope.dataItem = window.angular.copy($scope.dataItemOriginal);
        });
    },
    controller: function ($scope) {
   //....
   }
}])

这是正确的还是有更好的方法？

Answer 1

有更好的方法。您当前的解决方案是设置三个 watch - 两个是使用“=”绑定(bind)创建的，然后是您创建的额外 $watch 以制作副本。 $watches 相对昂贵。

这是一个不创建任何 watch 的替代方案:

.directive('myCustomDirective', [
'$log', function ($log) {
return {
    restrict: 'E',
    templateUrl: '<div ng-click="clicked()">Click me for current value</div>',
    scope: {
        item: '&'
    },
    controller: function($scope) {
        $scope.clicked = function(){
            alert(item());  //item() returns current value of parent's $scope.item property
        }
        $scope.val = item();  //val is the initial value of $parent.item
        $scope.val = 42; //$parent.item is unaffected. 
    }

}])

& 被严重误解了。虽然它可以用于将函数传递到一个独立的范围，但它实际上做的是:

provides a way to execute an expression in the context of the parent scope

它在指令中生成一个函数，调用时会在父作用域的上下文中执行表达式。表达式不必是函数或函数调用。它可以是任何有效的 Angular 表达式。

所以在你的例子中:

<my-custom-directive data-item="item"></my-custom-directive>

scope: {
    item: '&'
}

指令中的$scope.item 将是您可以在 Controller 或模板中调用的函数。调用该函数将返回父范围中“item”引用的对象。没有与 & 的绑定(bind) - 不使用 watch 。

“单向绑定(bind)”用词不当的地方是使用 &，该指令不能更改 $parent.item 的值，而当使用“=”时，该指令凭借创建的 $watches ， 能够。它也不是“一次”，因为它在技术上完全不受限制。

由于 Angular 用于生成函数的机制涉及 $parse，指令可以传入“局部变量”，用指令中的值覆盖表达式中的值。所以，在指令 Controller 中，如果你这样做了:

item({item: 42})

它总是返回 42，不管父作用域中的 item 值是多少。正是这个特性使得 & 对于使用指令中的数据在父作用域上执行函数表达式非常有用。