Verwendung ng-bind-html mit URL

Question

Zur Zeit habe ich ein Div mit ng-bind-html, die ich HTML zu binden, verwenden, die ich pass in

<div ng-bind-html="renderHtml(message.text)" /> 

Derzeit message.text HTML ist. Ich möchte lieber eine URL übergeben und dieses HTML in die div eingefügt haben.

Wie kann ich das erreichen?

Answer 1

Sie können die Quelle hinzufügen, wie:

<div ng-bind-html="URl | safeHtml"></div> 

Und brauchen $sce für eine sichere Bindung der URL mit dieser Richtlinie hinzuzufügen:

app.filter('safeHtml', function ($sce) { 
    return function (val) { 
     return $sce.trustAsHtml(val); 
    }; 
}); 

Edit:

Statt direkte Bindung der URL, bette sie in iframe ein und benutze sie für eine sichere Bindung:

$scope.URL = <iframe ng-src="url"></iframe> 

Answer 2

Ich würde es tun, wie folgt:

<input ng-model="myUrl"/> 
<div id="myDiv" /> 

Und dann eine Uhr für myUrl, hinzufügen und eine Anforderung für die URL jeder Änderung vornehmen:

$scope.$watch('message.text', function(newValue) { 
    $.ajax({ url: 'newValue', success: function(data) { 
     $("#myDiv").html(data); 
    }}); 
} 

Answer 3

persönlich i, würde eine benutzerdefinierte Anweisung machen, um so etwas zu tun.

Ich würde die URL als Attributparameter senden, die Anweisung holen Sie den HTML-Code mit $ http.get(), und wenn es geladen ist, hängen Sie es an den HTML-Code an.