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>

这是指令的定义方式：

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

}]);

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

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

Answer 1

使用$observe观察包含插值的属性的值更改（例如src="{{bar}}"）。这不仅非常有效，而且它也是轻松获得实际值的唯一方法，因为在链接阶段，插值尚未进行评估，因此此时的值设置为undefined。 - directive doc

当您手动检查范围时，将定义值。

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

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

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

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

1 个答案: