Question

我有一个案例，我有一个指令，它获取一个值形式Controller $ scope.colorName。指令将其绑定为单向并将此值保存在隔离范围“colorVar”中。指令模板将“colorVar”渲染为{{colorVar}}。我需要在指令的link函数中更改“colorVar”的值。但它没有反映在UI上。

HTML：

<div ng-app="myApp" ng-controller="appCtrl">
{{colorName}}
    <my-directive color='{{colorName}}'>
    </my-directive>
</div>

JavaScript的：

angular.module('myApp', []).controller('appCtrl',function($scope){
$scope.colorName='red';

})
.directive('myDirective', function () {
    return {
        restrict: 'E',
        scope: {
            colorVar: '@color'
        },
        template: '<span> {{ colorVar }} </span><span>{{extra}}</span>',
        link:function(scope,element,attrs){
        scope.colorVar='orange';
        scope.extra='kk';

        }
    };
});

在链接功能中，我使用“橙色”更新了scope.colorVar，但未反映在用户界面上，但scope.exta确实反映在用户界面上。

http://jsfiddle.net/ut7628d7/1/

知道我做错了什么。为什么会发生这种情况以及如何实现呢？谢谢。

Answer 1

如果您希望能够更改指令中的颜色形式，请使用双向绑定。 e.g。

scope: {
    colorVar: '=color'
}

HTML

<my-directive color='colorName'></my-directive>

http://jsfiddle.net/0he428hw/

Answer 2

这取决于您是否希望指令的更新值也改变控制器中的原始值：

修改原始变量

如果您希望指令修改控制器中的原始colorName，请通过引用传递colorName并在模板中使用双向绑定：

<my-directive color='colorName'> <!-- instead of color='{{colorName}}' -->

并在指令中：

scope: {
    colorVar: '=color' // instead of '@color'
},

http://jsfiddle.net/9szjpx9d/

这个输出将是“橙色橙色kk”，因为它始终是相同的对象，因此当指令将其更改为“橙色”时，它将影响两个地方。

复制变量

如果你希望指令只修改它自己的值，并输出“red orange kk”，那么就像现在一样保持一个属性绑定，但是使用$ timeout将指令链接函数延迟一个tick，这样值就可以了它在范围上设置将覆盖通过指令属性接收的值：

$timeout(function() {
  scope.colorVar = 'orange';
  scope.extra = 'kk';
});

同时，单独的原始颜色值在控制器中保持不变，因为它作为字符串而不是作为对象引用传递给指令。

http://jsfiddle.net/mpb2cuaj/

angular指令隔离范围属性在链接函数中更新但未反映在指令视图

2 个答案:

修改原始变量

复制变量