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(scope_ in firebug) の出力をクリックします)、iconImage、iconTooltip、iconRoute プロパティが正しく設定されているように見えます。

それでも、console.log(scope.iconImage)、console.log(scope.iconTooltip)、console.log(scope.iconRoute) は「undefined」を出力します

4

1 に答える 1

10

$observe補間を含む属性の値の変化を観察するために使用します (例: src="{{bar}}")。これは非常に効率的であるだけでなく、実際の値を簡単に取得する唯一の方法でもあります。これは、リンク段階では補間がまだ評価されておらず、この時点で値が に設定されているためundefinedです。--ディレクティブ ドキュメント

スコープを手動で検査するまでに、値が定義されます。

$observe を使用する必要がある理由 (実際には $watch は、'@' で定義された分離スコープ プロパティにも機能します) は、補間された値が変更されるたびにディレクティブが何かを実行する必要がある可能性が高いためです。たとえば、 の値がtextForIcon変更された場合、ディレクティブによって管理されている DOM 内の何かを変更したい場合があります。

リンク関数の実行時に定義された値が必要な場合は、次の 2 つのオプションがあります。

  1. 「@」の代わりに「=」を使用してください。これには、HTML から {{}} を削除する必要があります。
  2. 値が変更されない場合は、文字列を渡します。
    <rl-icon-widget icon-class="vladClass" ...>
    次に、ディレクティブでattrs.iconClass-- '@' を使用する必要はありません。
于 2013-03-06T18:02:17.873 に答える