parse html in ng-repeat

Question

Я искал несколько часов, и я не могу найти способ разбора кода HTML при извлечении с помощью ng-repeat. Я проверил $ ​​sce.trustAsHtml, но я не знаю, как применить его в моем коде.

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 неправильным? Я буду применять его к json-файлу, используя директиву $ http, как только я это выясню. Может ли кто-нибудь пролить свет? У меня есть мой код на http://jsfiddle.net/s2ykvy8n/

Спасибо.

Answer 1

Включите сценарий ng-sanitize и добавьте его в свой модуль.

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

и просто использовать ng-bind-html

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

и вы хорошо идти: -

Plnkr

С, что вы делаете, HTML, в связывании будет отображается как textcontent в элементе, обрабатывается директивой интерполяции.

Answer 2

Мое первое наклонение (так как из вашего примера, вы просто возвращаете ссылки), советуем удалить html из возвращаемого json и просто вернуть 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