javascript - AngularJS:父范围未在指令中更新(具有隔离范围)双向绑定(bind)

Question

我有以下代码，也可以在http://jsfiddle.net/garukun/u69PT/上摆弄.

查看:

<div data-ng-app="testApp">
    <div data-ng-controller="testCtrl">
        <strong>{{pkey}}</strong>
        <span data-test-directive data-parent-item="pkey" 
            data-parent-update="update(pkey)"></span>
    </div>
</div>

JS:

var testApp = angular.module('testApp', []);

testApp.directive('testDirective', function ($timeout) {
    return {
        scope: {
            key: '=parentItem',
            parentUpdate: '&'
        },
        replace: true,
        template: '<div><p>{{key}}</p>' +
            '<button data-ng-click="lock()">Lock</button>' +
            '</div>',
        controller: function ($scope, $element, $attrs) {
            $scope.lock = function () {
                $scope.key = 'D+' + $scope.key;
                console.log('DIR :', $scope.key);

                // Expecting $scope.$parent.pkey to have also been
                // updated before invoking the next line.
                $scope.parentUpdate();
                // $timeout($scope.parentUpdate); // would work.
            };
        }
    };
});

testApp.controller('testCtrl', function ($scope) {
    $scope.pkey = 'golden';
    $scope.update = function (k) {
        // Expecting local variable k, or $scope.pkey to have been
        // updated by calls in the directive's scope.
        console.log('CTRL:', $scope.pkey, k);
        $scope.pkey = 'C+' + k;
        console.log('CTRL:', $scope.pkey);
    };
});

基本上，我正在设置具有隔离作用域的指令，其中我从父作用域 (pkey) 双向绑定(bind)一个属性 (key)，并且还委托(delegate)了一个要调用的方法 (parentUpdate)在父范围的上下文中。

现在，在指令中的 ng-click 事件处理程序期间，我想调用 parentUpdate 方法并在其中做一些事情。当我调用该方法时，我希望父范围的模型已更新。但实际上并非如此，这就是让我感到困惑的地方。

这可能是因为中间缺少一些 $digest 循环，因为用 $timeout 包装 parentUpdate 调用会按预期工作。

有人可以阐明缺少的内容吗？或者如何正确调用 parentUpdate？

Answer 1

好吧，我要解决这个问题......看起来你在 $digest 循环之前改变了孤立的子变量和父变量，其中双向逻辑同步两者。详情如下:

1. 首先，您的lock() 函数通过单击按钮来执行。这会更新独立的 $scope.key 变量。 注意:这不会立即更新父$scope.pKey；这通常会在下一个 $digest 周期发生，但在这种情况下不会发生。继续阅读……
2. 在 lock() 中，您正在调用 parentUpdate() 来更新父级的 $scope.pKey 变量。
3. THEN $digest 循环执行。当它循环到父范围时，正确检测到对 $scope.pKey 的更改。
4. 对 $scope.pKey 的更改触发了一个 watch()，它是由隔离范围中的双向绑定(bind)创建的。 These lines是关键的..
5. 由独立范围创建的 watch() 检查双向绑定(bind)的值是否与父级的值同步。如果不是(在这种情况下不是)，父级的值将被复制到隔离范围即使隔离范围的值也已更改并且实际上是先更改。

Misko's famous post on Angular data-binding描述了 $digest 循环方法的好处。您在这里看到的是 $digest 改变合并的方法的一个有意识的副作用，其中，正如源代码评论所说，parent changed and it has precedence ...这意味着您的隔离范围的更改会丢失。

您在上面提到的 $timeout() 方法通过仅更改第一个 $digest 周期中的独立范围的值来避免此问题，这允许它被复制到父范围成功，然后调用 parentUpdate()

$compile documentation说:

Often it's desirable to pass data from the isolated scope via an expression and to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).

这意味着，在第 2 步，您可以通过对象映射为 pkey 传递值，如下所示:

parentUpdate({pkey: 'D+' + $scope.key })

这是更新后的 fiddle :http://jsfiddle.net/KbYcr/