在ng-repeat中解析html

我一直在尋找幾個小時，我似乎無法找到使用ng-repeat進行檢索時如何解析HTML代碼。我檢出了$ sce.trustAsHtml，但我不知道如何將其應用於我的代碼中。在ng-repeat中解析html

HTML文件：

<div ng-app="myApp"> 
<div ng-controller="MyCtrl"> 
    <h2>My Links</h2> 
    <table class="table table-bordered"> 
     <thead> 
      <tr> 
       <td>Name</td> 
       <td>URL</td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="stuff in myStuff()"> 
       <td>{{stuff.name}}</td> 
       <td>{{stuff.url}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div>

的JavaScript

var myApp = angular.module('myApp', []); 

myApp.controller('MyCtrl', function ($scope) { 
$scope.myStuff = function() { 
    return [ 
     { 
      'name':'Google', 
      'url':'<a href="http://google.com">Google</a>' 
     }, 
     { 
      'name':'Yahoo', 
      'url':'<a href="http://yahoo.com">Yahoo</a>' 
     }, 
     { 
      'name':'Microsoft', 
      'url':'<a href="http://microsoft.com">Microsoft</a>' 
     } 
    ]; 
}; 
});

它顯示HTML源代碼，但我希望它編譯代碼。我的JS方法錯了嗎？一旦我明白了這一點，我將使用$ http指令將它應用於json文件。任何人都可以點亮一下嗎？我的代碼是http://jsfiddle.net/s2ykvy8n/

謝謝。

來源

2014-10-17 w1n78

包含ng-sanitize腳本並在你的模塊中添加依賴項。

var myApp = angular.module('myApp', ['ngSanitize']);

，只是使用ng-bind-html

 <td ng-bind-html="stuff.url"></td>

，你是好去： -

Plnkr

隨着你在做什麼，在綁定的HTML將在由插值指令處理時，在元素中顯示爲textcontent。

來源

2014-10-17 21:29:52 PSL

忘了這個！好東西。 – dannypaz 2014-10-17 21:37:01

@PSL就是這樣！我之前嘗試ngSanitize，但沒有奏效。現在我知道爲什麼。我認爲angular.min.js是完整的。事實證明它沒有angular-sanitize.js。現在，我也包括這一點，它的作品。謝謝 – w1n78 2014-10-17 21:44:25

@ w1n78 yup !!，不客氣.. :) – PSL 2014-10-17 22:27:19

我的第一個傾向（因爲從你的例子中，你只是返回鏈接）是建議你從返回的json中刪除html，並將url作爲字符串返回。

格式：

{ 
    'name': 'Google', 
    'url': 'http://google.com' 
}

然後你的HTML看起來像這樣，

<tbody> 
    <tr ng-repeat="stuff in myStuff()"> 
     <td>{{stuff.name}}</td> 
     <td><a href="{{stuff.url}}">{{stuff.name}}</a></td> 
    </tr> 
</tbody>

但是，如果你MUST有HTML中的字串JSON文件，我想看看$compile。有一些關於底部的例子可以幫助你如何創建一個指令來編譯你的'url'字符串爲HTML

來源

2014-10-17 21:34:22 dannypaz

我用鏈接作爲一個簡單的例子來了解如何做到這一點。我將要處理的數據有更多的html標籤，如文本樣式。我會看看$ compile。感謝您的建議。 – w1n78 2014-10-17 21:46:53

在ng-repeat中解析html

回答

相關問題