AngularJS: 문자열에서 HTML 삽입

AngularJS: 문자열에서 HTML 삽입

이걸 많이 찾아봤는데 답을 못 찾거나 이해가 안 가네요.구체적인 예가 투표에 당선됩니다=)

• HTML 문자열을 반환하는 함수를 가지고 있습니다.
• 기능을 변경할 수 없습니다.
• 문자열로 표현된 html을 DOM에 삽입하고 싶습니다.
• 컨트롤러, 디렉티브, 서비스, 기타 기능하는 것(합리적으로 좋은 프랙티스)을 사용할 수 있습니다.
• 면책사항:나는 $ 컴파일을 잘 이해하지 못한다.

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

// 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 - $120-d html 삽입
• 문서에 삽입된 HTML에서는 AngularJS가 실행되지 않습니다.기입()
• 각도로 HTML 텍스트 이스케이프JS 지시어

이 링크의 예를 참조해 주세요.

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