إدراج HTML في طريقة العرض من وحدة تحكم AngularJS

يمكنك أيضًا إنشاء مرشح مثل:

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>

ملاحظة : عامل التصفية هذا يثق في أي وكل أتش تي أم أل مرت عليه ، ويمكن أن يقدم ثغرة XSS إذا تم تمرير المتغيرات مع إدخال المستخدم إليها.

Angular JS يعرض HTML داخل العلامة

الحل المقدم في الرابط أعلاه يعمل بالنسبة لي ، ولم يعمل أي من الخيارات في هذا الموضوع. لأي شخص يبحث عن نفس الشيء مع الإصدار 1.2.9 من AngularJS

إليك نسخة:

حسنًا ، وجدت حلاً لهذا:

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 بشكل صحيح في طريقة العرض بطريقة آمنة ومأمونة.

يجب تضمين وحدة التعقيم بعد الزاوي:

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

ملاحظة لا تتطلب منك هذه الطريقة تضمين الوحدة النمطية ngSanitize.

على HTML

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

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

OR

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

اعتبارًا من Angular 4 ، هذه هي الطريقة التي تعمل الآن:

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

مأخوذة من هذا السؤال: Angular HTML HTML

لقد وجدت أن استخدام ng-sanitize لم يسمح لي بإضافة ng-click في html.

لحل هذا أضفت التوجيه. مثله:

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>

حظا سعيدا.

فقط فعلت هذا باستخدام ngBindHtml باتباع الزاوي (v1.4) مستندات ،

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

تأكد من تضمين ngSanitize في تبعيات الوحدة. ثم يجب أن تعمل بشكل جيد.

حل آخر ، يشبه إلى حد كبير blrbr's باستثناء استخدام سمة النطاق:

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" لإظهار إخفاء بيانات القالب هذه.

استعمال

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

هنا هو الحل جعل مرشح مثل هذا

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

وتطبيق هذا كمرشح على ng-bind-html مثل

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

وشكر روبن ديكروب

مجرد استخدام بسيط [innerHTML] ، مثل أدناه:

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

قبل أن تحتاج إلى استخدام ng-bind-html...

إليك توجيه 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>