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 단계가 있습니다.

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);

ng-sanitize를 사용하면 HTML에 ng-click을 추가 할 수 없었습니다.

이 문제를 해결하기 위해 지시문을 추가했습니다. 이처럼 :

app.directive('htmldiv', function($compile, $parse) {
return {
  restrict: 'E',
  link: function(scope, element, attr) {
    scope.$watch(attr.content, function() {
      element.html($parse(attr.content)(scope));
      $compile(element.contents())(scope);
    }, true);
  }
}
});

그리고 이것은 HTML입니다.

<htmldiv content="theContent"></htmldiv>

행운을 빕니다.

angular (v1.4) docs 을 따라 ngBindHtml을 사용 하여이 작업을 수행했습니다 .

<div ng-bind-html="expression"></div> 
and expression can be "<ul><li>render me please</li></ul>"

모듈의 종속성에 ngSanitize를 포함시켜야합니다. 그렇다면 잘 작동합니다.

범위가 지정된 속성을 사용한다는 점을 제외하고 blrbr과 매우 유사한 다른 솔루션은 다음과 같습니다.

angular.module('app')
.directive('renderHtml', ['$compile', function ($compile) {
    return {
      restrict: 'E',
      scope: {
        html: '='
      },
      link: function postLink(scope, element, attrs) {

          function appendHtml() {
              if(scope.html) {
                  var newElement = angular.element(scope.html);
                  $compile(newElement)(scope);
                  element.append(newElement);
              }
          }

          scope.$watch(function() { return scope.html }, appendHtml);
      }
    };
  }]);

그리고

<render-html html="htmlAsString"></render-html>

당신이 대체 할 수 있습니다 element.append()로element.replaceWith()

각도에서 새 속성 또는 지시문 을 작성하여이 문제점에 대한 하나 이상의 솔루션이 있습니다 .

product-specs.html

 <h4>Specs</h4>
        <ul class="list-unstyled">
          <li>
            <strong>Shine</strong>
            : {{product.shine}}</li>
          <li>
            <strong>Faces</strong>
            : {{product.faces}}</li>
          <li>
            <strong>Rarity</strong>
            : {{product.rarity}}</li>
          <li>
            <strong>Color</strong>
            : {{product.color}}</li>
        </ul>

app.js

 (function() {
var app = angular.module('gemStore', []);    
app.directive("     <div ng-show="tab.isSet(2)" product-specs>", function() {
return {
  restrict: 'E',
  templateUrl: "product-specs.html"
};
});

index.html

 <div>
 <product-specs>  </product-specs>//it will load product-specs.html file here.
 </div>

또는

<div  product-specs>//it will add product-specs.html file 

또는

<div ng-include="product-description.html"></div>

https://docs.angularjs.org/guide/directive

ng-include 를 사용할 수도 있습니다 .

<div class="col-sm-9 TabContent_container" ng-include="template/custom.html">
</div>

"ng-show" 를 사용 하여이 템플릿 데이터 숨기기를 표시 할 수 있습니다 .

여기에 솔루션이 다음과 같은 필터를 만듭니다

.filter('trusted',
   function($sce) {
     return function(ss) {
       return $sce.trustAsHtml(ss)
     };
   }
)

이것을 ng-bind-html에 필터로 적용하십시오.

<div ng-bind-html="code | trusted">

그리고 Ruben Decrop에게 감사합니다

사용하다

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

과

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

이를 위해서는 예 angular-sanitize.js를 들어 html 파일에을 포함해야합니다.

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

다음은 간단하고 안전하지 않은 bind-as-html지시어입니다 ngSanitize.

myModule.directive('bindAsHtml', function () {
    return {
        link: function (scope, element, attributes) {
            element.html(scope.$eval(attributes.bindAsHtml));
        }
    };
});

신뢰할 수없는 콘텐츠를 바인딩하는 경우 보안 문제가 발생합니다.

다음과 같이 사용하십시오.

<div bind-as-html="someHtmlInScope"></div>

Angular 4를 사용하여 템플릿에 HTML을 표시하는 파이프 작업 예제

1. 정격 파이프 이스케이프 -html.pipe.ts

`

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({name : 'keepHtml', pure : false})
export class EscapeHtmlPipe implements PipeTransform{
 constructor(private sanitizer : DomSanitizer){
 }
 transform(content){
  return this.sanitizer.bypassSecurityTrustHtml(content);
 }
}

`2. app.module.ts에 파이프를 등록하십시오

 import {EscapeHtmlPipe} from './components/pipes/escape-html.pipe';
    declarations: [...,EscapeHtmlPipe]

3. 템플릿에서 사용

       <div class="demoPipe"  [innerHtml]="getDivHtml(obj.header) | keepHtml">

   코드 스 니펫 실행결과 숨기기

   스 니펫 확장

4. getDivHtml() { //can return html as per requirement}

   연관된 component.ts 파일에 getDivHtml에 대한 적절한 구현을 추가하십시오.

[innerHTML]아래와 같이 간단하게 사용하십시오 .

<div [innerHTML]="htmlString"></div>

사용하기 전에 ng-bind-html...

Angular 7 + ionic 4에서 "[innerHTML]"을 사용하여 HTML 내용을 표시 할 수 있습니다.

<div [innerHTML]="htmlContent"></div>

나는 이것이 또한 당신을 도울 것입니다 바랍니다. 감사.