[javascript] AngularJS 컨트롤러에서 HTML을보기에 삽입
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 단계가 있습니다.
-
angular-sanitize.min.js 리소스를 포함하십시오.
<script src="lib/angular/angular-sanitize.min.js"></script>
-
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 취약성을 나타낼 수 있습니다.
답변
위의 링크에서 제공되는 솔루션은 저에게 효과적이었습니다.이 스레드의 옵션은 없습니다. 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);