1. ホーム
  2. angularjs

[解決済み] ng-includeノードをテンプレートに置き換える?

2023-06-09 04:25:15

質問

angularの初心者です。を使用することは可能ですか? を置き換えることができますか? 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>

どのように解決するのですか?

私はこれと同じ問題を持っていて、まだ動的なテンプレートを含めるために 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' に設定すると、望ましいマークアップになります。