1

HTMLテンプレートフラグメントを使用せずに既存のngDirectiveをラップする演習を行っています。この例では、ng-show. これには問題があることを認識しています (例: ハードコーディングitem.viewing)。理由を尋ねるかもしれませんが、より良いイディオムがない限り、それはしばらく脇に置いておきます。機能しないことがわかりません-属性を追加してから、スコープにコンパイルします。範囲の問題はありますか?優先順位やトランスクルージョンが必要だとは思いません。

動作するコードは次のようになります。

<ul ng-repeat='item in collection'>
  <li ng-show='item.viewing'>text</li>
</ul>

liに置き換えたい

<li viewing>text</li>

angularjs ディレクティブ コードは次のとおりです。

app.directive('viewing', function($compile){
  return {
    restrict: 'A',
    compile: function(tElem, tAttrs){
      tAttrs.$set('ngShow', 'item.viewing');
      return function(scope, elem, attr){
        $compile(scope, elem, attr);
       };
     }
   };
});

ここに作業バージョンがあります: http://plnkr.co/PjusCDkgt7PuXKtZowbH

愚かなことをあらかじめお詫び申し上げます。乾杯。

4

1 に答える 1

1

いくつかのことが原因で、これが機能しなくなりました。

  1. $compileHTML を受け取り、リンク関数を返します。この関数はscope、コンパイルされた DOM を指定されたスコープにリンクするために呼び出されます。
  2. DOM から属性を削除する必要があります。削除しないとviewing、要素を再コンパイルし$compileて無限ループに陥ります。

作業ディレクティブは次のとおりです。

app.directive('viewing', function($compile){
  return {
    restrict: 'A',
    compile: function(tElem, tAttrs){
      tAttrs.$set('ngShow', 'item.viewing');
      tElem.removeAttr('viewing');
      return function(scope, elem, attr){
        $compile(elem)(scope);
      };
    }
  };
});
于 2013-05-11T06:44:43.363 に答える