ng-bind-html 스트립 요소 특성

ng-bind-html 스트립 요소 특성

템플릿에 마크업이 포함된 문자열을 보간하려고 합니다.

컨트롤러에서:
$scope.message = "Hello moto <a ui-sref='home.test'>click</a>";

템플릿:

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

다음과 같은 뜻이 있습니다.

<div ng-bind-html="message.text" <div="" class="ng-binding">Hello moto <a>click</a></div>

다음 필터를 사용하는 것도 도움이 되지 않습니다. 텍스트는 주석이 달린 선택 항목 중 하나에 대해 단순하게 빠져나갑니다.

angular.module('test-filters', ['ngSanitize'])
    .filter('safe', function($sce) {
            return function(val) {
                return $sce.trustAsHtml(val);
                //return $sce.trustAsUrl(val);
                //return $sce.trustAsResourceUrl(val);
            };
    });

문자열을 회피하거나 속성을 제거하지 않고 어떻게 내 문자열을 보간할 수 있습니까?

편집: Plunker http://plnkr.co/edit/H4O16KgS0mWtpGRvW1Es?p=preview (ngSanitize를 참조하는 sylwester 버전이 있는 updated)

여기 http://jsbin.com/faxopipe/1/edit 에서 지금 분류되어 있습니다.태그 'ui-sref' 안에 다른 지시사항이 있어서 작동하지 않아서 $sce 서비스를 이용하셔야 합니다.

당신의 js에 메소드를 추가해주세요:

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

보기에서:

<p ng-bind-html="to_trusted(message)"></p>

ui.router 경로를 사용하는 시나리오에서는 $compile을 동적 html에 $sce와 함께 사용해야 ui-sref가 제대로 작동합니다.그렇게 하지 않으면 실제로 작동하지 않는 링크만 표시됩니다.

예<span> Hello moto <a ui-sref='home.test'> Link </a> </span>

//You must need to add boundary conditions, this is just for demonstration
$scope.to_trusted = function(someHTML) {
    var compiledVal = $compile(someHTML)($scope);
    var compiledHTML = compiledVal[0].outerHTML;
    return $sce.trustAsHtml(compiledHTML);
}

이런 식으로 쓰시면,

<p ng-bind-html="to_trusted(message)"></p>

당신의 메시지는 유효한 HTML이어야 합니다."<"따라서 $compile에 HTML이 아닌 것을 전달하면 jqlite 오류가 발생합니다.사용했습니다.<span>당신 사건을 처리하기 위해서요

angular-sanitize.js에 대한 참조를 놓쳤고 angular.app에도 이를 주입했습니다.

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

html을 바인딩하는 가장 간단한 옵션은 ng-bind-html입니다.

<li>link ng-html-bind <div ng-bind-html="message"></div></li>

플렁커를 만나보세요.

언급URL : https://stackoverflow.com/questions/24178316/ng-bind-html-strips-elements-attributes