ng-bind-html-unsafe가 제거 된 상태에서 HTML을 어떻게 삽입합니까? 을 사용하려고합니다 . 그러나 나는 그것을

컨트롤러가 HTML을 DIV에 삽입 할 수 있도록 $sanitize공급자와 ng-bind-htm-unsafe지시문 을 사용하려고합니다 .

그러나 나는 그것을 작동시킬 수 없다.

<div ng-bind-html-unsafe="{{preview_data.preview.embed.html}}"></div>

AngularJS (감사)에서 제거 되었기 때문에 발견되었습니다.

그러나가 없으면 ng-bind-html-unsafe이 오류가 발생합니다.

http://errors.angularjs.org/undefined/$sce/unsafe

답변

  1. sanitize.js가로드되어 있는지 확인해야합니다. 예를 들어 https://ajax.googleapis.com/ajax/libs/angularjs/[LAST_VERSION]/angular-sanitize.min.js 에서로드 하십시오.
  2. 예를 들어 다음에 ngSanitize모듈 을 포함시켜야 합니다 app.var app = angular.module('myApp', ['ngSanitize']);
  3. ng-bind-html원본 html콘텐츠 와 바인딩 하면 됩니다. 컨트롤러에서 다른 작업을 수행 할 필요가 없습니다. 구문 분석 및 변환은 ngBindHtml지시문에 의해 자동으로 수행됩니다 . (이 How does it work섹션을 읽으십시오 : $ sce ). 따라서 귀하의 경우 <div ng-bind-html="preview_data.preview.embed.html"></div>에는 작업을 수행 할 것입니다.

답변

Alex가 제안한 것처럼 범위에서 함수를 선언하는 대신 간단한 필터로 변환 할 수 있습니다.

angular.module('myApp')
    .filter('to_trusted', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);

그런 다음 다음과 같이 사용할 수 있습니다.

<div ng-bind-html="preview_data.preview.embed.html | to_trusted"></div>

다음은 실제 예입니다. http://jsfiddle.net/leeroy/6j4Lg/1/

답변

표시된 다른 의견 중 하나 ng-bind-html-unsafe가 더 이상 사용되지 않으므로 Angular 1.2.0 …을 사용하고 있음을 나타냅니다 .

대신 다음과 같은 작업을 수행해야합니다.

<div ng-bind-html="preview_data.preview.embed.htmlSafe"></div>

컨트롤러에서 $sce서비스를 삽입 하고 HTML을 “신뢰할 수있는”것으로 표시하십시오.

myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {
  // ...
  $scope.preview_data.preview.embed.htmlSafe =
     $sce.trustAsHtml(preview_data.preview.embed.html);
}

1.2.0-rc3 이상을 사용하고 싶습니다. rc3 의 버그 를 수정 하여 “감시자”가 신뢰할 수있는 HTML에서 제대로 작동하지 못하게했습니다.

답변

나에게 가장 간단하고 유연한 솔루션은 다음과 같습니다.

<div ng-bind-html="to_trusted(preview_data.preview.embed.html)"></div>

컨트롤러에 기능을 추가하십시오.

$scope.to_trusted = function(html_code) {
    return $sce.trustAsHtml(html_code);
}

$sce컨트롤러의 초기화에 추가 하는 것을 잊지 마십시오 .

답변

내 의견으로는 이것에 대한 가장 좋은 해결책은 다음과 같습니다.

  1. 예를 들어 common.module.js 파일에있을 수있는 사용자 지정 필터를 만듭니다 (앱 전체에서 사용됨).

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

// html filter (render text as html)
app.filter('html', ['$sce', function ($sce) {
    return function (text) {
        return $sce.trustAsHtml(text);
    };
}])

  2. 용법:

    <span ng-bind-html="yourDataValue | html"></span>

이제 지시어 ng-bind-html가 trustAsHtml함수의 일부 가 아닌 이유 를 알지 못합니다.

어쨌든-그것이 내가하는 방식입니다-67 %의 시간, 그것은 항상 작동합니다.

답변

물론 사용자 입력을 사용하는 경우 보안 상 위험 할 수있는 간단한 안전하지 않은 HTML 바인딩을 만들 수 있습니다.

App.directive('simpleHtml', function() {
  return function(scope, element, attr) {
    scope.$watch(attr.simpleHtml, function (value) {
      element.html(scope.$eval(attr.simpleHtml));
    })
  };
})

답변

ng-bind-html-unsafe 내부에서 {{}}을 (를) 사용할 필요는 없습니다.

<div ng-bind-html-unsafe="preview_data.preview.embed.html"></div>

예를 들면 다음과 같습니다. http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview

{{}} 연산자는 기본적으로 ng-bind의 약자이므로 시도한 내용은 바인딩 내부의 바인딩에 해당하며 작동하지 않습니다.