用@定义的隔离范围属性在指令的链接函数中未定义/消失

Question

该指令具有隔离范围,并且范围属性以"@"传递.

这是指令的调用方式:

<div ng-init="classForIcon = 'vladClass'"></div>
<div ng-init="textForIcon = 'Icon\'s text'"></div>
<div ng-init="routeForIcon = 'www.google.com'"></div>
<div ng-init="tooltipForIcon = 'my tooltip'"></div>
<div ng-init="imageForIcon = 'images/HOME_ICON1.png'"></div>

<rl-icon-widget icon-class="{{classForIcon}}" icon-text = "{{textForIcon}}" icon-tooltip="{{tooltipForIcon}}" icon-route="{{routeForIcon}}" icon-image="{{imageForIcon}}"></rl-icon-widget>

这是指令的定义方式:

'使用严格';

fcPortalApp.directive('rlIconWidget', ['localizationAssistant', function(localizationAssistant) {
    var obj = {
        restrict: 'E',
        templateUrl: 'scripts/directives/rliconwidget/rliconwidget.html',

        //require: 'ngModel',
        scope: {
            //ngModel: '@',
            iconClass: "@",
            iconRoute: "@",
            iconText: "@",
            iconTooltip: "@",
            iconImage: "@"         
        },

        link: function(scope, element, attrs) {

            console.log(scope);
            console.log(scope.iconImage);
            console.log(scope.iconTooltip);
            console.log(scope.iconRoute);

        }
    };

    console.log(obj);
    return obj;

}]);

当我检查范围对象(单击console.log的输出(firebug中的scope_)时,看起来它正确设置了iconImage,iconTooltip和iconRoute属性.

然而,console.log(scope.iconImage),console.log(scope.iconTooltip)和console.log(scope.iconRoute)打印"undefined"

Answer 1

使用$observe观察到,含有插(如属性值的变化src="{{bar}}").这不仅非常有效,而且它也是轻松获得实际值的唯一方法,因为在链接阶段,插值尚未进行评估,因此此时的值设置为undefined.- 指令文件

手动检查范围时,将定义值.

我们需要使用$ observe的原因(实际上$ watch也适用于用'@'定义的隔离范围属性)是因为当插值值发生变化时,指令可能需要做一些事情.例如,如果textForIcon更改的值,您可能希望修改由指令管理的DOM中的某些内容.

如果需要链接函数运行时定义的值,则有两个选项:

1. 使用'='代替'@'.这将要求您从HTML中删除{{}}.
2. 如果值不会改变,则传递字符串:
   <rl-icon-widget icon-class="vladClass" ...>
   然后在你的指令中,只需使用attrs.iconClass- 不需要'@'.