[javascript] AngularJS 컨트롤러에서 HTML을보기에 삽입

JAVASCRIPT / 글쓴이

AngularJS 컨트롤러에서 HTML 단편 을 작성 하고이 HTML을보기에 표시 할 수 있습니까?

일치하지 않는 JSON Blob을 중첩 된 id: value쌍 목록으로 변환해야한다는 요구 사항에서 비롯됩니다 . 따라서 HTML 은 컨트롤러에서 만들어지며 이제 표시하려고합니다.

모델 속성을 만들었지 만 HTML을 인쇄하지 않으면 뷰에서 렌더링 할 수 없습니다 .

최신 정보

생성 된 HTML을 따옴표 안에 문자열로 앵귤러 렌더링하면 문제가 발생하는 것으로 보입니다. 이 문제를 해결할 방법을 찾으려고 노력할 것입니다.

컨트롤러 예 :

var SomeController = function () {

    this.customHtml = '<ul><li>render me please</li></ul>';
}

보기 예 :

<div ng:bind="customHtml"></div>

제공합니다 :

<div>
    "<ul><li>render me please</li></ul>"
</div>

답변

Angular 1.x의 ng-bind-html경우 HTML에서 사용 하십시오.

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

이 시점에서 attempting to use an unsafe value in a safe context오류가 발생하므로 ngSanitize 또는 $ sce 를 사용 하여 문제를 해결해야합니다.

$ sce

$sce.trustAsHtml()컨트롤러에서 HTML 문자열을 변환하는 데 사용하십시오 .

 $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);

ngSanitize

2 단계가 있습니다.

  1. angular-sanitize.min.js 리소스를 포함하십시오.
    <script src="lib/angular/angular-sanitize.min.js"></script>

  2. js 파일 (컨트롤러 또는 일반적으로 app.js)에 ngSanitize를 포함하십시오.
    angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

답변

다음과 같이 필터를 만들 수도 있습니다.

var app = angular.module("demoApp", ['ngResource']);

app.filter("trust", ['$sce', function($sce) {
  return function(htmlCode){
    return $sce.trustAsHtml(htmlCode);
  }
}]);

그런 다음보기에서

<div ng-bind-html="trusted_html_variable | trust"></div>

참고 :이 필터는 전달 된 모든 HTML을 신뢰하며 사용자 입력이있는 변수가 전달되면 XSS 취약성을 나타낼 수 있습니다.

답변

Angular JS는 태그 내에 HTML을 보여줍니다

위의 링크에서 제공되는 솔루션은 저에게 효과적이었습니다.이 스레드의 옵션은 없습니다. AngularJS 버전 1.2.9와 동일한 것을 찾는 사람이라면

사본은 다음과 같습니다.

Ok 나는 이것에 대한 해결책을 찾았다.

JS :

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

HTML :

<p ng-bind-html="renderHtml(value.button)"></p>

편집하다:

설정은 다음과 같습니다.

JS 파일 :

angular.module('MyModule').controller('MyController', ['$scope', '$http', '$sce',
    function ($scope, $http, $sce) {
        $scope.renderHtml = function (htmlCode) {
            return $sce.trustAsHtml(htmlCode);
        };

        $scope.body = '<div style="width:200px; height:200px; border:1px solid blue;"></div>';

    }]);

HTML 파일 :

<div ng-controller="MyController">
    <div ng-bind-html="renderHtml(body)"></div>
</div>

답변

다행히도 오류 메시지를 피하기 위해 멋진 필터 나 안전하지 않은 방법이 필요하지 않습니다. 이것은 의도적이고 안전한 방식으로 HTML 마크 업을 올바르게 출력하기위한 완벽한 구현입니다.

살균 모듈은 Angular 다음에 포함되어야합니다.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>

그런 다음 모듈을로드해야합니다.

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

이를 통해 컨트롤러, 지시문 등의 문자열에 마크 업을 포함시킬 수 있습니다.

scope.message = "<strong>42</strong> is the <em>answer</em>.";

마지막으로 템플릿에서 다음과 같이 출력되어야합니다.

<p ng-bind-html="message"></p>

예상 출력이 생성됩니다. 42 가 답 입니다.

답변

오늘 시도했지만 내가 찾은 유일한 방법은

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

답변

ng-bind-html-unsafe 더 이상 작동하지 않습니다.

가장 짧은 방법입니다.

필터를 작성하십시오.

myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

그리고 당신의 관점에서 :

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

PS이 방법은 ngSanitize모듈 을 포함하지 않아도됩니다 .

답변

html로

<div ng-controller="myAppController as myCtrl">

<div ng-bind-html-unsafe="myCtrl.comment.msg"></div>

또는

<div ng-bind-html="myCtrl.comment.msg"></div

컨트롤러에서

mySceApp.controller("myAppController", function myAppController( $sce) {

this.myCtrl.comment.msg = $sce.trustAsHtml(html);

함께 작동 $scope.comment.msg = $sce.trustAsHtml(html);