如何在我的應用程序中顯示html數據？

Question

我正在使用Angular框架在我的應用程序中填充我的數據。

我的數據包含HTML標記

這件事情就像

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

在我的HTML

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

瀏覽器的顯示確切的文本 '<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內容。 像

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

之後，你可以用這樣的：

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

不要忘了在角

希望這將幫助你的配置以注入指令。