Bagaimana untuk Menghimpun Templat Sudut yang Disertakan Secara Dinamik dengan ng-bind-html?

angular.js: Menyusun Kod HTML Disertakan Secara Dinamik menggunakan ng-bind-html

Apabila bekerja dengan angular.js, anda mungkin menghadapi senario di mana anda perlu memasukkan kod HTML secara dinamik ke dalam templat. Untuk mencapai ini, arahan ng-bind-html biasanya digunakan. Walau bagaimanapun, apabila cuba memasukkan templat Sudut menggunakan pendekatan ini, ia mungkin tidak ditafsirkan dan sebaliknya hanya dimasukkan ke dalam halaman tanpa sebarang fungsi.

Penyelesaian

Sebaliknya menggunakan templat berkod keras, anda boleh menggunakan penyelesaian yang membolehkan anda menyusun ungkapan Sudut yang dibenamkan dalam respons API. Berikut ialah panduan langkah demi langkah:

Langkah 1: Pasang arahan angular-bind-html-compile daripada GitHub: https://github.com/incuna/angular-bind -html-compile

Langkah 2: Sertakan arahan dalam modul Angular anda:

<code class="javascript">angular.module("app", ["angular-bind-html-compile"])</code>

Langkah 3: Gunakan arahan dalam anda templat seperti berikut:

<code class="html"><div bind-html-compile="letterTemplate.content"></div></code>

Contoh:

Objek Pengawal:

<code class="javascript">$scope.letter = { user: { name: "John" } };</code>

Respons JSON :

{ "letterTemplate": [
    { content: "<span>Dear {{letter.user.name}},</span>" }
] }

Output HTML:

<code class="html"><div bind-html-compile="letterTemplate.content"> 
   <span>Dear John,</span>
</div></code>

Penjelasan:

Angular-bind- jam tangan arahan html-compile berubah kepada ungkapan yang disediakan dalam atribut bind-html-compile. Apabila nilai berubah, ia mengemas kini kandungan HTML elemen dan menyusun sebarang ungkapan Sudut di dalamnya menggunakan perkhidmatan $compile. Ini membolehkan anda memasukkan dan melaksanakan templat Sudut secara dinamik menggunakan ng-bind-html.

Rujukan Tambahan:

Berikut ialah kod arahan yang berkaitan untuk rujukan anda:

<code class="javascript">(function () {
    'use strict';

    var module = angular.module('angular-bind-html-compile', []);

    module.directive('bindHtmlCompile', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(function () {
                    return scope.$eval(attrs.bindHtmlCompile);
                }, function (value) {
                    element.html(value);
                    $compile(element.contents())(scope);
                });
            }
        };
    }]);
}());</code>

Atas ialah kandungan terperinci Bagaimana untuk Menghimpun Templat Sudut yang Disertakan Secara Dinamik dengan ng-bind-html?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!