AngularJS: Wstaw HTML z ciągu znaków

Question

Długo szukałem tego, ale albo nie mogę znaleźć odpowiedzi, albo jej nie rozumiem. Konkretny przykład wygra głos:)

• Mam funkcję, która zwraca ciąg znaków HTML.
• Nie mogę zmienić funkcji.
• Chcę, aby html reprezentowany przez ciąg znaków został wstawiony do DOM.
• Chętnie korzystam z kontrolera, dyrektywy, usługi lub cokolwiek innego, co działa (i jest rozsądnie dobrą praktyką).
• Zastrzeżenie: Nie rozumiem $ kompilacji dobrze.

Oto co próbowałem:

// My magic HTML string function. 
function htmlString (str) { 
    return "<h1>" + str + "</h1>"; 
} 

function Ctrl ($scope, $compile) { 
    $scope.htmlString = htmlString; 
} 
Ctrl.$inject = ["$scope", "$compile"]; 

To nie działa.

próbowałem go jako dyrektywa TOO:

// My magic HTML string function. 
function htmlString (str) { 
    return "<h1>" + str + "</h1>"; 
} 

angular.module("myApp.directives", []) 
    .directive("htmlString", function() { 
    return { 
     restrict: "E", 
     scope: { content: "@" }, 
     template: "{{ htmlStr(content) }}" 
    } 
    }); 

    ... and in my HTML ... 

    <html-string content="foo"></html-string> 

Pomoc?

Uwaga

Patrzyłem na nich, między innymi, ale nie mógł tego dokonać.

• AngularJS : Insert HTML into view
• AngularJS $http HTML Parser
• angularjs - inserting $compile-d html
• AngularJS doesn't execute in HTML inserted with document.write()
• Escape HTML text in an AngularJS directive

Answer 1

Wystarczy popatrzeć na przykład w ten link:

http://docs.angularjs.org/api/ngSanitize.$sanitize

Zasadniczo kątowe ma dyrektywę wstawiania html na strony. W twoim przypadku można wstawić html za pomocą dyrektywy ng-bind-HTML tak:

Jeśli już zrobili to wszystko:

// My magic HTML string function. 
function htmlString (str) { 
    return "<h1>" + str + "</h1>"; 
} 

function Ctrl ($scope) { 
    var str = "HELLO!"; 
    $scope.htmlString = htmlString(str); 
} 
Ctrl.$inject = ["$scope"]; 

Następnie w html w zakresie tego kontrolera, ty mógł

<div ng-bind-html="htmlString"></div> 

Answer 2

można również użyć $sce.trustAsHtml('"<h1>" + str + "</h1>"'), jeśli chcesz poznać więcej szczegółów, proszę odnieść się do $sce