AngularJS:父作用域未在指令(具有独立作用域)双向绑定中更新 [英] AngularJS: Parent scope is not updated in directive (with isolated scope) two way binding

问题描述

我有一个具有独立作用域的指令，其值以两种方式绑定到父作用域.我正在调用一个更改父作用域中值的方法，但更改未应用于我的指令中.(不触发双向绑定).这个问题非常相似:

AngularJS:父级范围未在指令中更新(具有独立范围)双向绑定

但我没有更改指令中的值，而是仅在父作用域中更改它.我阅读了解决方案，并在第五点说:

由隔离作用域创建的 watch() 检查双向绑定的值是否与父级的值同步.如果不是，则将父级的值复制到隔离范围.

这意味着当我的父值更改为 2 时，会触发监视.它检查父值和指令值是否相同 - 如果不相同，则复制到指令值.好的，但我的指令值仍然是 1 ...我错过了什么?

html:

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

js:

var testApp = angular.module('testApp', []);testApp.directive('testDirective', function ($timeout) {返回 {范围: {键:'=父项'，父更新:'&'},替换:真的，模板:'<button data-ng-click="lock()">Lock</button>'+'</div>',控制器:函数($scope，$element，$attrs){$scope.lock = 函数 () {console.log('指令:', $scope.key);$scope.parentUpdate();//$timeout($scope.parentUpdate);//会工作.//期望值是 2，但它是 1console.log('指令:', $scope.key);};}};});testApp.controller('testCtrl', function ($scope) {$scope.myValue = '1';$scope.update = 函数 () {//需要局部变量 k 或 $scope.pkey//通过指令范围内的调用更新.console.log('CTRL:', $scope.myValue);$scope.myValue = "2";console.log('CTRL:', $scope.myValue);};});

小提琴

解决方案

在控制器中更改 $scope.myValue 后使用 $scope.$apply() ，例如:

testApp.controller('testCtrl', function ($scope) {$scope.myValue = '1';$scope.update = 函数 () {//需要局部变量 k 或 $scope.pkey//通过指令范围内的调用更新.console.log('CTRL:', $scope.myValue);$scope.myValue = "2";$scope.$apply();console.log('CTRL:', $scope.myValue);};});

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:

AngularJS: Parent scope not updated in directive (with isolated scope) two way binding

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.

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

Fiddle

解决方案

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屋！