1

アンギュラーの新機能。正しいやり方を理解しようとする

ユーザーが次のページに移動する前にリンクをクリックしたときにカスタム ロジックを実行するディレクティブを作成しようとしています。ただし、カスタム ロジックに到達する前に、ディレクティブを設定するのに苦労しています。私はできるようにしたい:

A) ディレクティブの特定の属性をオプションにする (場合によっては異なるデフォルトに設定する)

B) ユーザーが文字列リテラルまたは変数をコントローラーのスコープからディレクティブの属性に渡して、ディレクティブのスコープで使用できるようにします。

私の問題:

1.) ディレクティブの属性で文字列リテラルを使用すると、対応する $scope プロパティが未定義になります。$attrs を介してアクセスする必要があります。これは最悪のことではありませんが、$scope.Prop をチェックし、未定義の場合は $attrs.Prop をチェックするのは間違った方法のようです。

2.) また、この回答は、属性で文字列リテラルを使用するときに一重引用符を使用する必要があると言っているようですが、その動作は私の例では機能しません。

3.) ディレクティブに特定の属性が設定されていない場合、ディレクティブの「コントローラー」関数で $scope に設定したデフォルト値がレンダリング時に反映されません。理由がわかりません。

Plnkr のコード

どんな助けでも大歓迎です！

4

2 に答える 2

4

以下は、3 つのケースすべてが機能するバージョンです。

  1. リテラルは特別なことなしで機能します
  2. スコープ値は、通常の{{ expression }}構文を使用して機能します
  3. デフォルトは、このスレッドhref='{{strHref || 'default href'}}'で見つけたこの構文を使用して、ディレクティブのテンプレートで提供されます。

完全なディレクティブの定義は次のとおりです。

return {
    restrict: 'E',
    replace: true,
    scope: {
        strHref: '@link',
        strText: '@displayText',
    },
    template: '<div><div>variables: {{strHref || \'default href\'}}, {{strText || \'default text\'}}</div> result: <a href="{{strHref || \'default href\'}}">{{strText || \'default text\'}}<span ng-show="blnIsBackButton"> (Return)</span></a></div>',

};

リンク : http://plnkr.co/edit/RB6shHI0xYa1FkP4eXDy

于 2013-07-24T23:53:59.650 に答える
0

スコープ & はリテラル /expression に使用できます。Scope = メソッド呼び出し用の双方向バインディングと scope = を設定します。必要に応じて、コントローラーのプロパティのデフォルト値を設定できます

ディレクティブ名は小文字にする必要があると思います。誰かがこれを確認できますか？pageLink を使用すると機能しませんが、pageLink では機能します。(「L」に注意)。物件も同様。

http://www.egghead.io/には、スコープに関するいくつかの素晴らしいビデオがあります。

3つのスコープ分離タイプすべてを使用する Plunkerでこれを作成しました

于 2013-07-25T05:08:33.247 に答える