4

たとえば、UI Bootstrapには、フィールドの値を提案する「typeahead」というディレクティブがあります。要素の色を提案する要素の属性として使用できるディレクティブを作成したいとしましょう。

これは失敗する試みです...

指令：

angular.module('myApp')
  .directive('suggestcolors', function () {
    return {
      compile: function compile(element, attrs) {
        attrs.$set("typeahead", "color for color in ['red', 'blue', 'green']");
      }
    };
  });

意見：

<textarea ng-model="foo" suggestcolors></textarea>

テキストエリアを調べると、属性が設定されていますが、何もしません。attrs への変更をリンク関数に移動すると、同じことが起こります。ビューで typehead 属性を直接設定すると、期待どおりに機能します。

<textarea ng-model="foo" typeahead="color for color in ['red', 'blue', 'green']"></textarea>

(ただし、DRY の理由から、この属性を動的に挿入できるようにしたいと考えています。実際の使用例はこれよりも複雑です。)

同様の質問がここで尋ねられましたが(コンパイルステップで ng-click 動作を動的に追加することについて)、直接答えられることはありませんでした。

4

1 に答える 1

6

コンパイル後、AngularJS は$compileすべての子要素のみを呼び出します。要素自体は自動的に再コンパイルされないため、この段階でディレクティブを追加しても効果はありません。あなたの場合、コンパイル関数からリンク関数に変更して（scope引数を取得して）、$compile(element)(scope)自分自身を呼び出すことができると思います。

を追加するディレクティブと、そのディレクティブを「動的に」追加する別のディレクティブがあるこのフィドルを参照してください。後でstyle="color: red"電話しない限り、機能しません。$compile

チッ！

于 2013-08-15T08:35:16.280 に答える