AngularJS：父范围在指令更新（带隔离范围内）双向绑定 [英] AngularJS: Parent scope is not updated in directive (with isolated scope) two way binding

问题描述

我有与双向绑定到父范围值隔离范围指令。我打电话，改变父范围值的方法，但变化并不在我的指令应用。（双向绑定不会被触发）。这个问题是非常相似的：

I have a directive with isolated scope with a value with two way binding to the parent scope. I am calling a method that changes the value in the parent scope, but the change is not applied in my directive.(two way binding is not triggered). This question is very similar:

<一个href=\"http://stackoverflow.com/questions/19391773/angularjs-parent-scope-not-updated-in-directive-with-isolated-scope-two-way-b\">AngularJS:父范围，指令不更新（带隔离范围内）双向结合

但我不会改变从配置参数的值，但只有在父范围内改变它。我读了解决方案，并在点五次有人说：

but I am not changing the value from the directive, but changing it only in the parent scope. I read the solution and in point five it is said:

The watch() created by the isolated scope checks whether it's value for the bi-directional binding is in sync with the parent's value. If it isn't  the parent's value is copied to the isolated scope.

这意味着当我父值更改为2，手表被触发。它检查父值和指导值是否是相同的 - 如果不是其复制到指导价值。好吧，但我的指导价值仍是1 ...我缺少什么？

Which means that when my parent value is changed to 2, a watch is triggered. It checks whether parent value and directive value are the same - and if not it copies to directive value. Ok but my directive value is still 1 ... What am I missing ?

HTML

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

JS：

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

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

                 $scope.parentUpdate();
                 //$timeout($scope.parentUpdate); // would work.

                 // expecting the value to be 2, but it is 1
                 console.log('directive :', $scope.key);
            };
        }
    };
});

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

小提琴： http://jsfiddle.net/u69PT/17/

推荐答案

使用 $范围。$修改 $范围后申请（）。 myvalue的在你的控制器，如：

Use $scope.$apply() after changing the $scope.myValue in your controller like:

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

这篇关于AngularJS：父范围在指令更新（带隔离范围内）双向绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！