AngularJS : 문자열에서 HTML 삽입

AngularJS : 문자열에서 HTML 삽입

---

나는 이것에 대해 많이 보았지만 대답을 찾을 수 없거나 이해하지 못합니다. 특정 예가 투표에서 이길 것입니다 =)

• HTML 문자열을 반환하는 함수가 있습니다.
• 기능을 변경할 수 없습니다.
• 문자열로 표시된 html을 DOM에 삽입하고 싶습니다.
• 컨트롤러, 디렉티브, 서비스 또는 작동하는 모든 것을 사용하게되어 기쁩니다 (합리적으로 좋은 습관입니다).
• 면책 조항 : $ compile을 잘 이해하지 못합니다.

내가 시도한 것은 다음과 같습니다.

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

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

작동하지 않았습니다.

나는 그것을 지시어로도 시도했다.

// 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>

도움?

노트

나는 다른 것들 중에서 이것들을 보았지만 그것을 작동시킬 수 없었다.

• AngularJS :보기에 HTML 삽입
• AngularJS $ http HTML 파서
• angularjs-$ compile-d html 삽입
• AngularJS는 document.write ()로 삽입 된 HTML에서 실행되지 않습니다.
• AngularJS 지시문에서 HTML 텍스트 이스케이프

---

이 링크의 예를 살펴보십시오.

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

기본적으로 angular에는 페이지에 html을 삽입하는 지시문이 있습니다. 귀하의 경우 다음과 같이 ng-bind-html 지시문을 사용하여 html을 삽입 할 수 있습니다.

이미이 모든 작업을 수행 한 경우 :

// 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"];

그런 다음 해당 컨트롤러의 범위 내에서 HTML에서

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

---

당신은 또한 사용할 수 있습니다 $sce.trustAsHtml('"<h1>" + str + "</h1>"'), 더 자세한 내용을 알고 싶다면 $ sce 를 참조하십시오

참고 URL : https://stackoverflow.com/questions/14761724/angularjs-insert-html-from-a-string