angularJs 变量为 Html

Question

实际上我正在搜索如何将我的变量转换为 Html，这个变量包含来自 instagram 的嵌入代码。

在我的控制器中

instaembed.controler "instaCtrl", ($scope, $http) ->
#instagram embed get example from insta
    $http.get ("http://api.instagram.com/oembed?url=http://instagr.am/p/fA9uwTtkSN/")
        .success(data) ->
           $scope.html = data.html
...

$scope.html 中的结果包含一个包含许多 div 和图像的 blockquote

我已经在视图中测试了它（使用 ngsanitize），但它只显示文本而不显示图像。

有人知道如何获得它吗？ :D

谢谢你（对不起我的英语）。

Answer 1

您需要使用 ngBindHtml 指令。 https://docs.angularjs.org/api/ng/directive/ngBindHtml

<div ng-bind-html-unsafe="html"></div>

其中 html 是您的 $scope.html 变量。这将在 div 内呈现您的变量包含的内容。

function testCtrl($scope) {
    $scope.html = "<strong>Hello world!</strong>"
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-controller="testCtrl" ng-app>
    <div ng-bind-html-unsafe="html"></div>
</div>

Answer 2

您将不得不使用 Angular 的内置 严格上下文转义 $sce

$sce Documentation

然后，在您的控制器中：

instaembed.controler "instaCtrl", ($scope, $http, $sce) ->
#instagram embed get example from insta
    $http.get ("http://api.instagram.com/oembed?url=http://instagr.am/p/fA9uwTtkSN/")
        .success(data) ->
           $scope.html = $sce.trustAsHtml(data.html);
...

Answer 3

你应该使用ng-bind-html

<span ng-bind-html="your scope variable"></span>

angularJs 变量为 Html

angularJs variable to Html

javascript

html

angularjs

coffeescript

instagram