Question

我正在使用angularJS开发一段时间了。对于我将给出的研讨会，我建立了一个非常简单的小提琴来解释不同的角度绑定：'@'，'＆amp;'，'='。

到目前为止这么好，这里是小提琴，没有什么可疯狂的：http://jsfiddle.net/Djul/gpxgount/5/

javascript代码：

function controller($scope) {
    $scope.parentAt = "At";
    $scope.parentAmpersand = "Apersand";
    $scope.parentEqual = "Equal";

    $scope.updateParentVariables = function(){
        $scope.parentAt= 'parentAt';
        $scope.parentAmpersand= 'parentdAmpersan';
        $scope.parentEqual = 'parentdEqual';
    };

    $scope.reset = function(){
        $scope.parentAt = 'At';
        $scope.parentAmpersand = 'Ampersand';
        $scope.parentEqual = 'Equal';
    };
}

angular.module('myTestApp', []);

angular.module('myTestApp').directive('testBindings', function(){
    return{
        template: '<p>Child scope values:</p><p>{{testAt}}</p><p>{{testAmpersand}}</p><p>{{testEqual}}</p><button ng-click="updateChildVariables()">Update Variables in child scope</button>',
        restrict: 'E',
        scope:{
            testAt: '@',
            testAmpersand: '&',
            testEqual: '='
        },
        link: function(scope){
            scope.updateChildVariables = function(){
                scope.testAt = 'childAt';
                scope.testAmpersand= 'childAmpersand';
                scope.testEqual = 'childEqual';
            }
        }
    };
})
.directive('controllerScopeUpdate', function(){
    return{
        template:'<button ng-click="updateParentVariables()">Update variables in parent scope</button><p>Controller Values:</p><p>{{parentAt}}</p><p>{{parentAmpersand}}</p><p>{{parentEqual}}</p><button ng-click="reset()">reset to original values</button>',
        restrict: 'E'
    }
});

如果您尝试这样做： 1.更新父变量 2.更新子变量 3.再次更新父变量 4. !! @参数的值在子范围内没有改变！

但更奇怪的是，如果你做“重置”它会再次起作用，直到第二次点击“更新父变量”...

我错过了什么？为什么重置一直在工作，而“更新父变量”在重置每次点击之间只能工作一次？

由于

Answer 1

我承认 - 我对此感到有些困惑，但这只是因为你所描述的用法有点不寻常，有不寻常的副作用

父项的第二次赋值不起作用的原因是因为{{parentAt}}的插值没有改变，因此"@"绑定不更新内部范围的值。或者，更准确地说，$watch(interpolateFn, )不会触发，因为interpolateFn返回的值没有改变。

所以当你为它赋值"parentAt"时（再次！），绑定的最后一个值仍然是“parentAt”，因此它不会检测到更改而不会更新scope.testAt。

作为一项简单测试，每次调用$scope.parentAt时都会更改updateParentVariables的值 - Demo - 您会看到该值始终更新。

稍微偏离主题：

您的scope.testAmpersand治疗也被“打破”。首先，要显示该值，您需要将其作为函数调用：

{{testAmpersand()}}

但是，当你为它分配一个字符串值 - testAmpersand = "childAmpersand"时，你正在“破坏”它与"&"绑定表达式的连接。

AngularJS子范围绑定：行为我无法解释

1 个答案: