85

角度が初めてです。ng-include ノードを含まれているテンプレートの内容に置き換えることは可能ですか? たとえば、次のようにします。

<div ng-app>
    <script type="text/ng-template" id="test.html">
        <p>Test</p>
    </script>
    <div ng-include src="'test.html'"></div>
</div>

生成される html は次のとおりです。

<div ng-app>
    <script type="text/ng-template" id="test.html">
        <p>Test</p>
    </script>
    <div ng-include src="'test.html'">
        <span class="ng-scope"> </span>
        <p>Test</p>
        <span class="ng-scope"> </span>
    </div>
</div>

しかし、私が欲しいのは:

<div ng-app>
    <script type="text/ng-template" id="test.html">
        <p>Test</p>
    </script>
    <p>Test</p>
</div>
4

7 に答える 7

134

私はこれと同じ問題を抱えていましたが、それでも ng-include の機能に動的テンプレートを含めたいと考えていました。私は動的な Bootstrap ツールバーを作成していましたが、CSS スタイルを適切に適用するには、よりクリーンなマークアップが必要でした。

興味のある人のために私が思いついた解決策は次のとおりです。

HTML:

<div ng-include src="dynamicTemplatePath" include-replace></div>

カスタム ディレクティブ:

app.directive('includeReplace', function () {
    return {
        require: 'ngInclude',
        restrict: 'A', /* optional */
        link: function (scope, el, attrs) {
            el.replaceWith(el.children());
        }
    };
});

このソリューションを上記の例で使用した場合、scope.dynamicTemplatePath を「test.html」に設定すると、目的のマークアップが得られます。

于 2014-01-03T20:57:23.437 に答える
28

@ user1737909 のおかげで、ng-include を使用する方法ではないことに気付きました。ディレクティブは、より優れたアプローチであり、より明示的です。

var App = angular.module('app', []);

App.directive('blah', function() {
    return {
        replace: true,
        restrict: 'E',  
        templateUrl: "test.html"
    };
});

HTMLで：

<blah></blah>
于 2013-05-12T01:49:19.030 に答える
10

もう 1 つの方法は、独自の単純な replace/include ディレクティブを記述することです。

    .directive('myReplace', function () {
               return {
                   replace: true,
                   restrict: 'A',
                   templateUrl: function (iElement, iAttrs) {
                       if (!iAttrs.myReplace) throw new Error("my-replace: template url must be provided");
                       return iAttrs.myReplace;
                   }
               };
           });

これは、次のように使用されます。

<div my-replace="test.html"></div>
于 2014-08-30T22:25:51.510 に答える
9

これは、子を置き換える正しい方法です

angular.module('common').directive('includeReplace', function () {
    return {
        require: 'ngInclude',
        restrict: 'A',
        compile: function (tElement, tAttrs) {
            tElement.replaceWith(tElement.children());
            return {
                post : angular.noop
            };
        }
    };
});
于 2015-11-03T20:02:58.607 に答える
3

次のディレクティブは、ng-include ネイティブ ディレクティブ機能を拡張します。

コンテンツの準備ができてロードされたときに、元の要素を置き換えるイベント リスナーを追加します。

「置換」属性を追加するだけで、元の方法で使用できます。

<ng-include src="'src.html'" replace></ng-include>

または属性表記で：

<div ng-include="'src.html'" replace></div>

ディレクティブは次のとおりです (「include-replace」モジュールを依存関係として含めることを忘れないでください)。

angular.module('include-replace', []).directive('ngInclude', function () {
    return {
        priority: 1000,
        link: function($scope, $element, $attrs){

            if($attrs.replace !== undefined){
                var src = $scope.$eval($attrs.ngInclude || $attrs.src);

                var unbind = $scope.$on('$includeContentLoaded', function($event, loaded_src){
                    if(src === loaded_src){
                        $element.next().replaceWith($element.next().children());
                        unbind();
                    };
                });
            }
        }
    };
});
于 2016-05-26T14:59:07.057 に答える
2

@Brady Isom が提供するソリューションよりも安全なソリューションを使用します。

テンプレートを削除する前に、テンプレートが読み込まれていることを確認するために、onloadによって提供されるオプションに依存することを好みます。ng-include

.directive('foo', [function () {
    return {
        restrict: 'E', //Or whatever you need
        scope: true,
        template: '<ng-include src="someTemplate.html" onload="replace()"></ng-include>',
        link: function (scope, elem) {
            scope.replace = function () {
                elem.replaceWith(elem.children());
            };
        }
    };
}])

すべてが最初のディレクティブ内で処理されるため、2 番目のディレクティブは必要ありません。

于 2015-07-29T12:48:06.883 に答える