ng-bind-html-unsafe를 제거한 상태에서 HTML을 삽입하려면 어떻게 해야 하나요?

ng-bind-html-unsafe를 제거한 상태에서 HTML을 삽입하려면 어떻게 해야 하나요?

사용하려고 합니다.$sanitize프로바이더와ng-bind-htm-unsafe명령어를 사용하여 DIV에 HTML을 삽입할 수 있습니다.

하지만, 나는 그것을 작동시킬 수가 없어요.

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

Angular JS에서 삭제되었기 때문에 알게 되었습니다(감사합니다).

하지만 없이는ng-bind-html-unsafe, 다음의 에러가 표시됩니다.

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

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/

Angular 1.2.0을 사용한다고 하셨는데...다른 코멘트 중 하나와 같이ng-bind-html-unsafe는 폐지되었습니다.

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

<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에서 제대로 작동하지 않는 버그를 수정했습니다.)

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내용.컨트롤러로 다른 작업을 수행할 필요가 없습니다.해석 및 변환은 에 의해 자동으로 실행됩니다.ngBindHtmldirective. (를 참조해 주세요.How does it work이 섹션: $sce)를 참조해 주세요.그래서 당신의 경우엔<div ng-bind-html="preview_data.preview.embed.html"></div>할 수 있을 거야

가장 심플하고 유연한 솔루션은 다음과 같습니다.

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

또한 컨트롤러에 기능을 추가합니다.

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

add 잊지 마세요$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의 약자이기 때문에 당신이 시도한 것은 바인딩 내의 바인딩에 해당하므로 동작하지 않습니다.

저도 비슷한 문제가 있었어요.여전히 github에서 호스트된 마크다운 파일에서 콘텐츠를 가져올 수 없습니다.

app.js에서 $sceDelegateProvider에 화이트리스트(github 도메인 추가)를 설정한 후 매우 효과적이었습니다.

설명:다른 URL에서 콘텐츠를 로드하는 경우 신뢰할 수 있는 것으로 포장하는 대신 화이트리스트를 사용합니다.

문서: $sceDelegateProvider 및 ngInclude(외부 HTML 단편 가져오기, 컴파일 및 포함)

는 완전히 할 수 contextic excape를 할 수 .ng-html-bind이 옵션은 안전하지 않지만 테스트 시 유용합니다.

Angular의 예의 JS 매뉴얼:

angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
  // Completely disable SCE.  For demonstration purposes only!
  // Do not use in new projects.
  $sceProvider.enabled(false);
});

의 설정 을 html에 할 수 .ng-html-bind처럼 '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아.

SCE를 사용하면 코딩 오버헤드를 줄일 수 있어 많은 보안상의 이점을 얻을 수 있습니다.SCE 디세이블의 애플리케이션을 취득해, 스스로 시큐러티를 설정하거나, 나중에 SCE 를 유효하게 하는 것은 매우 어려워집니다.SCE가 도입되기 전에 작성된 다수의 기존 코드가 있어 한 번에 모듈을 이행하는 경우에는 SCE를 디세블로 하는 것이 적절할 수 있습니다.

이렇게 필터를 사용할 수 있습니다.

angular.module('app').filter('trustAs', ['$sce', 
    function($sce) {
        return function (input, type) {
            if (typeof input === "string") {
                return $sce.trustAs(type || 'html', input);
            }
            console.log("trustAs filter. Error. input isn't a string");
            return "";
        };
    }
]);

사용.

<div ng-bind-html="myData | trustAs"></div>

iframe 및 여기서 선언된 기타 유형의 소스 링크 등 다른 리소스 유형에 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/19415394/with-ng-bind-html-unsafe-removed-how-do-i-inject-html