2

別のタイプのディレクティブを DOM に動的に追加してコンパイルするディレクティブを作成しようとしています。文字列テンプレートを使用すると機能するように見えますが、templateUrl を使用すると失敗します。作業テンプレート文字列の jsfiddle は次のとおりです。

app.directive('clicker', function($compile) {
    'use strict';

    return {
        compile: function(tElement, tAttrs) {
            var t = '<div data-pop>Pop</div>';

            return function(scope, iElement) {
                iElement.click(function() {
                    $('body').append($compile(t)(scope));
                });
            };
        }
    }
});

app.directive('pop', function() {
    'use strict';

    return {
        template: '<div>Testing template</div>'
        //templateUrl: 'partials/pop.html'
    };
});

http://jsfiddle.net/89AYX/

ただし、templateUrl (テンプレート文字列の内容を正確に含む html ファイルを使用) に交換すると、一度しか機能しません。要素を DOM に追加しますが、templateUrl の内容を含まず、動的に追加されたディレクティブでリンク関数を呼び出しません ...

そのうちの 2 つを追加しようとすると、DOM は次のようになります。

<div data-pop><!-- content of pop.html --></div>
<div data-pop></div>
<div data-pop></div>
4

1 に答える 1

2

scope.$apply() を追加するとうまくいきました。jQuery 1.9.0 および Angular 1.0.3 でテスト済み。

iElement.bind('click', function() {
    $('body').append($compile(t)(scope));
    scope.$apply();  // cause a $digest cycle to run, since we're "outside" Angular
});

このフィドルはインライン化されたテンプレートを使用しますが、部分を取得するために別の HTTP GET を実行する必要があるローカル Web サーバーでもテストしました。

于 2013-01-19T22:56:56.320 に答える