用@ 定义的隔离作用域属性在指令的链接函数中未定义/消失 [英] Isolate scope attributes defined with @ are undefined/disappear in directive's link function

问题描述

该指令具有隔离作用域，作用域属性通过@"传递.

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

指令的调用方式如下:

<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(scope_ in firebug) 的输出，它看起来像正确设置了 iconImage、iconTooltip 和 iconRoute 属性.

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(scope.iconImage)、console.log(scope.iconTooltip) 和 console.log(scope.iconRoute) 打印未定义"

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

推荐答案

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

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

当您手动检查范围时，值已定义.

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

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

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.

如果您需要在链接函数运行时定义的值，您有两个选择:

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

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

1. Use '=' instead of '@'. This will require that you remove the {{}}s from the HTML.
2. 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 '@'.

这篇关于用@ 定义的隔离作用域属性在指令的链接函数中未定义/消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！