18

ng-repeat ディレクティブを独自のカスタム ディレクティブと組み合わせて使用​​すると問題が発生します。

HTML:

<div ng-app="myApp">
  <x-template-field x-ng-repeat="field in ['title', 'body']" />
</div>

JS:

angular.module('myApp', [])
    .directive('templateField', function () {
        return {
            restrict: 'E',
            compile: function(element, attrs, transcludeFn) {
                element.replaceWith('<input type="text" />');
            }
        };
    });

jSFiddleを参照してください

ここでの問題は、何も置き換えられないことです。私が達成しようとしているのは、「x-template-field」タグが DOM で完全に置き換えられた 2x 入力フィールドの出力です。私の疑いでは、ng-repeat は同時に DOM を変更しているため、これは機能しません。

このスタック オーバーフローの質問によると、受け入れられた回答は、これが以前のバージョンの AngularJS (?) で実際に機能していたことを示しているようです。

element.html('...') は機能しませんか?

element.html('...') は実際には生成された HTML をターゲット要素に挿入しますが、HTML をテンプレート タグの子要素にするのではなく、DOM で完全に置き換えます。

ng-repeat ディレクティブを持つ別のタグでテンプレート タグをラップしないのはなぜですか?

基本的に、上記と同じ理由で、生成された HTML を繰り返しタグの子要素として使用したくありません。おそらく私のアプリケーションでは適切に機能するでしょうが、マークアップを Angular に合わせて調整したように感じますが、その逆ではありません。

「テンプレート」プロパティを使用しないのはなぜですか?

「template」/「templateUrl」プロパティから取得した HTML を変更する方法が見つかりませんでした。挿入したい HTML は静的ではなく、外部データから動的に生成されます。

マークアップにこだわりすぎていませんか?

おそらく。:-)

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

4

2 に答える 2

16

ng-repeatより高い優先度を使用してディレクティブを前に実行する必要があるためng-repeat、要素を複製するときに変更を選択できます。

ディレクティブ ユーザー ガイドのセクション「コンパイル/リンク分離の理由」には、ng-repeat の仕組みに関する説明があります。

現在のng-repeat優先度は 1000 であるため、これよりも高いものは何でも実行する必要があります。

したがって、コードは次のようになります。

angular.module('myApp', [])
    .directive('templateField', function () {
        return {
            restrict: 'E',
            priority: 1001, <-- PRIORITY
            compile: function(element, attrs, transcludeFn) {
                element.replaceWith('<input type="text" />');
            }
        };
});
于 2013-04-12T03:46:59.897 に答える
3

ng-repeatテンプレートに入れます。要素の属性を変更し、それに応じてディレクティブを変更して、ng-repeat が必要かどうか、またはディレクティブのコンパイル内で使用するデータを決定できます。

HTML(属性):

<div ng-app="myApp" template-field></div>

JS:

angular.module('myApp', [])
    .directive('templateField', function () {
        return {          
            restrict: 'A',
            template:'<input type="text" value="{{field}" ng-repeat="field in [\'title\',\'body\']" />'            
        };
    });

デモ: http://jsfiddle.net/GDfxd/3/

要素としても機能します:

HTML(要素):

<div ng-app="myApp" >
    <template-field/>
</div>

JS

angular.module('myApp', [])
    .directive('templateField', function () {
        return {          
            restrict: 'E',
            replace:true,
            template:'<input type="text" value="{{field}}" ng-repeat="field in [\'title\',\'body\']" />'

        };
    });

デモ: http://jsfiddle.net/GDfxd/3/

于 2013-03-11T17:21:32.023 に答える