5

该指令具有隔离范围，并且范围属性使用“@”传递。

这就是指令的调用方式：

<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 中的范围_），看起来它的 iconImage、iconTooltip 和 iconRoute 属性设置正确。

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

4

1 回答 1

10

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

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

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

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

  1. 使用“=”而不是“@”。这将要求您从 HTML 中删除 {{}}。
  2. 如果值不会改变，传递字符串：
    <rl-icon-widget icon-class="vladClass" ...>
    然后在你的指令中，只需使用attrs.iconClass-- 不需要'@'。
于 2013-03-06T18:02:17.873 回答