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

问题描述

该指令具有隔离范围和scope属性正在以@过去了。

这是该指令是如何调用：

 ＆LT; D​​IV NG-的init =classForIcon ='vladClass'＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV NG-的init =textForIcon ='图标\\的文字'＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV NG-的init =routeForIcon ='www.google.com'＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV NG-的init =tooltipForIcon ='我的提示'＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV NG-的init =imageForIcon ='图像/ HOME_ICON1.​​png'＆GT;＆LT; / DIV＆GT;＆LT; RL-图标Widget图标类={{classForIcon}}图标，文本={{textForIcon}}图标提示={{tooltipForIcon}}图标路由={{routeForIcon}} 图标形象={{imageForIcon}}＆GT;＆LT; / RL-图标，窗口小部件＆GT;
 

这是该指令是如何定义的：

使用严格;

  fcPortalApp.directive（'rlIconWidget'，['localizationAssistant'，函数（localizationAssistant）{
    VAR OBJ = {
        限制：'E'，
        templateUrl：'脚本/指令/ rliconwidget / rliconwidget.html'，        //要求：ngModel'，
        范围： {
            // ngModel：'@'，
            iconClass：@，
            iconRoute：@，
            iconText：@，
            iconTooltip：@，
            iconImage：@
        }，        链接：功能（范围，元素，ATTRS）{            的console.log（范围）;
            的console.log（scope.iconImage）;
            的console.log（scope.iconTooltip）;
            的console.log（scope.iconRoute）;        }
    };    的console.log（OBJ）;
    返回OBJ;}]）;
 

当我检查的范围对象（点击的console.log输出（在Firebug scope_），它看起来像它已正确设置iconImage，iconTooltip和iconRoute属性。

然而，执行console.log（scope.iconImage），执行console.log（scope.iconTooltip）和执行console.log（scope.iconRoute）打印未定义

解决方案

  

使用 $观察来观察包含插补属性值的变化（如的src ={{栏}}）。这不仅是非常有效的，但它也可以轻松地获得实际价值的唯一方式，因为在链接阶段插值尚未评估，因此该值时，设置为未定义。 - 指令DOC

到时候你手动检查范围，价值得到确定。

我们需要使用$观察（实际上$手表也将与定义分离作用域属性的工作@）的原因是因为一条指令可能需要做一些事情每当插入值的变化。例如，如果 textForIcon 的值发生变化，则可能需要修改由您的指令管理的DOM的东西。

如果您需要的链接功能运行时定义的值，你有两个选择：

1. 使用的'='而不是'@'。这将要求您删除{{}}■从HTML。


2. 如果该值将不会改变，将字符串：结果＆LT; RL-图标Widget图标类=vladClass...＆GT; < BR>然后在你的指令，只需使用 attrs.iconClass - 不需要'@'

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.

Yet console.log(scope.iconImage), console.log(scope.iconTooltip) and console.log(scope.iconRoute) print "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.

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. 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 '@'.

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