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

The directive has isolate scope, and the scope attributes are being passed with "@".

该指令具有隔离范围,并且范围属性以“@”传递。

This is how the directive is called:

这是指令的调用方式:

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

This is how the directive is defined:

这是指令的定义方式:

'use strict';

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;

}]);

When I inspect the scope object (click on the output of console.log(scope_ in firebug), it looks like it has iconImage, iconTooltip and iconRoute properties set correctly.

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

Yet console.log(scope.iconImage), console.log(scope.iconTooltip) and console.log(scope.iconRoute) print "undefined"

然而,console.log(scope.iconImage),console.log(scope.iconTooltip)和console.log(scope.iconRoute)打印“未定义”

1 个解决方案

#1

Use $observe to observe the value changes of attributes that contain interpolation (e.g. src="{{bar}}"). Not only is this very efficient but it's also the only way to easily get the actual value because during the linking phase the interpolation hasn't been evaluated yet and so the value is at this time set to undefined. -- directive doc

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

By the time you manually inspect the scope, the values get defined.

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

The reason we need to use $observe (actually $watch will also work for isolate scope properties defined with '@') is because a directive will likely need to do something whenever the interpolated value changes. E.g., if the value of textForIcon changes, you may want to modify something in the DOM that is managed by your directive.

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

If you need the values defined when the linking function runs, you have two options:

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

Use '=' instead of '@'. This will require that you remove the {{}}s from the HTML.

使用'='代替'@'。这将要求您从HTML中删除{{}}。

If the values won't change, pass strings:
<rl-icon-widget icon-class="vladClass" ...>
Then in your directive, simply use attrs.iconClass -- no need for '@'.

如果值不会改变,则传递字符串: 然后在你的指令中,只需使用attrs.iconClass - 不需要'@'。

#1