내 앱에 html 데이터를 표시하는 방법은 무엇입니까?

Question

각도 응용 프로그램에서 내 데이터를 채우기 위해 프레임 워크를 사용하고 있습니다.

내 데이터는 HTML 태그를 포함

그건 내 HTML

<div> 
    {{test}} 
</div> 

브라우저 쇼 정확한 텍스트 '<p>this is a test</p> <strong>Bold text here...</strong>'의 출력에서 ​​

$scope.test = <p>this is a test<?p><strong>Bold text here...</strong> 

같은. html 태그를 구문 분석하여 '

테스트입니다.

여기 굵은 텍스트 ...입니다.

는 것이 가능할까요?

고맙습니다.

Answer 1

는 당신도 할 수있다 :

<div ng-bing-html-unsafe="test"></div> 

또는 당신이해야 할 당신이 사용하는 각 어떤 버전의 내용에 따라

$scope.test = $sce.trustAsHtml('<p>this is a test<?p><strong>Bold text here...</strong>'); 

. 당신이 1.2라고 말한 것을 보았습니다. 그래서 가장 마지막 것 같습니다. 그리고 $ sce에 대해서는 분명히 $ sce를 주입해야합니다.

myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) { 
    $scope.test = $sce.trustAsHtml('<p>this is a test<?p><strong>Bold text here...</strong>'); 
}); 

Answer 2

텍스트를 HTML 컨텐트로 구문 분석하기위한 지침을 만드십시오.

<div bind-unsafe-html="test"> 

이 당신을 도울 것입니다 각

희망의 설정에 지침을 주입하는 것을 잊었다하지 마십시오처럼

app.directive('bindUnsafeHtml', ['$compile', function ($compile) { 
     return function(scope, element, attrs) { 
      console.log("in directive"); 
      scope.$watch(
      function(scope) { 
       // watch the 'bindUnsafeHtml' expression for changes 
       return scope.$eval(attrs.bindUnsafeHtml); 
      }, 
      function(value) { 
       // when the 'bindUnsafeHtml' expression changes 
       // assign it into the current DOM 
       element.html(value); 

       // compile the new DOM and link it to the current 
       // scope. 
       // NOTE: we only compile .childNodes so that 
       // we don't get into infinite loop compiling ourselves 
       $compile(element.contents())(scope); 
      } 
     ); 
    }; 
}]); 

같은 그 후 당신은 사용할 수 있습니다.