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

Question

我有一个案例，我有一个从控制器 $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';

        }
    };
});

在 Link 函数中，我已将 scope.colorVar 更新为 'orange'，但未反映 UI，但 scope.exta 确实反映了 UI.

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

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

Answer 1

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

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/

此输出将是 "orange orange kk"，因为它始终是同一个对象，因此当指令将其更改为 'orange' 时，它将影响两个地方。

复制变量

如果你希望指令只修改它自己的值，并输出 "red orange kk"，那么保持你现在的属性绑定，但是使用 $ 将指令 link 函数延迟一个 tick超时，因此它在作用域上设置的值将覆盖通过指令属性接收的值：

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

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

http://jsfiddle.net/mpb2cuaj/

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

angular directive isolated scope property updated in link function but not reflecting on directive view

scope

directive

angularjs

修改原变量

复制变量

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

angular directive isolated scope property updated in link function but not reflecting on directive view

scope

directive

angularjs

修改原变量

复制变量

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