2

AngularJSを使用ng-bind-htmlして iframe をページに挿入しようとしていますが、最も単純なフォームでも動作させることができません。

Javascript

function Ctrl($scope) {
   $scope.showIt = '<iframe src="http://www.anything.com"></iframe>';
}

私のHTML：

<div ng-bind-html="showIt"></div>
4

1 に答える 1

8

ビューでhtmlコンテンツをレンダリングするようにangularに指示するには、 $sceサービスを使用する必要があります

Angular Doc によると

$sce は、AngularJS に厳密なコンテキスト エスケープサービスを提供するサービスです。SCE は、(a) デフォルトで安全であり、(b) XSS、クリックジャッキングなどのセキュリティ脆弱性の監査をはるかに容易にする方法で、コードの記述を支援します。

ngSanitizeそれを行う前に、アプリ内に依存関係を注入する必要があります

filterまたはを使用して2つの方法でそれを行うことができますcontroller

HTML

<div ng-app="app" ng-controller="mainCtrl">
    Using Filter
    <div ng-bind-html="showIt | toTrusted"></div>
    Using Controller
    <div ng-bind-html="htmlSafe(showIt)"></div>
</div>

JavaScript コード

var app = angular.module('app', ['ngSanitize']).
controller('mainCtrl', function ($scope, $sce) {
    $scope.showIt = '<iframe src="http://www.anything.com"></iframe>';
    $scope.htmlSafe = function (data) {
        return $sce.trustAsHtml(data);
    }
}).
filter('toTrusted', function ($sce) {
    return function (value) {
        return $sce.trustAsHtml(value);
    };
});

angular 1.2 以降、以下のバージョンで $sce 機能が有効になっているため、angular の構成フェーズで有効/無効にする必要があります。

app.config(['$sceProvider', function($sceProvider) {
    $sceProvider.enabled(true);
}]);

これがWorking Fiddleです

于 2015-01-20T17:08:19.590 に答える