So kompilieren Sie Winkelausdrücke in der Ng-Bind-HTML-Direktive

AngularJS ng-bind-html: Kompilieren von Angular-Code

Einführung

Die Ng-bind-html-Direktive ermöglicht die dynamische Einbindung von HTML-Code in Vorlagen. Während es für einfaches HTML funktioniert, werden Angular-Vorlagen nicht interpretiert, wenn sie eingebunden werden. Dieser Artikel bietet eine Lösung zum Kompilieren von Angular-Ausdrücken, die in ng-bind-html eingebettet sind.

Schritt-für-Schritt-Lösung

1. Direktive installieren:
Installieren Sie die Direktive „angular-bind-html-compile“ von GitHub: https://github.com/incuna/angular-bind-html-compile.

2 . Direktive in Modul einbinden:

angular.module("app", ["angular-bind-html-compile"])

3. Direktive in Vorlage verwenden:

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

Beispielverwendung

Controller-Objekt:

$scope.letter = { user: { name: "John"}}

JSON-Antwort:

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

HTML-Ausgabe:

<span>Dear John,</span>

Relevante Richtlinie

(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);
                });
            }
        };
    }]);
}());

Das obige ist der detaillierte Inhalt vonSo kompilieren Sie Winkelausdrücke in der Ng-Bind-HTML-Direktive. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!