it-swarm.asia

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

هل من الممكن إنشاء جزء HTML في وحدة تحكم AngularJS وإظهار HTML في العرض؟

يأتي هذا من أحد المتطلبات لتحويل فقاعة JSON غير متسقة إلى قائمة متداخلة من أزواج 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>
774
Swaff

من أجل 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

هناك خطوتين:

  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'])

1092
Luke Madera

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

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 إذا تم تمرير المتغيرات مع إدخال المستخدم إليها.

306
Katie Astrauskas

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

لحسن الحظ ، لا تحتاج إلى أي فلاتر فاخرة أو طرق غير آمنة لتجنب رسالة الخطأ هذه. هذا هو التنفيذ الكامل لإخراج ترميز 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 هو الجواب .

63
Pier-Luc Gendreau

لقد جربت اليوم ، الطريقة الوحيدة التي وجدت بها هي هذه

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

61
Damax

ng-bind-html-unsafe لم يعد يعمل.

هذه هي أقصر الطرق:

إنشاء عامل تصفية:

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

وفي رأيك:

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

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

51
Bidhan Bhattarai

على 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);

25
Sotos

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

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

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

16
Garth

لقد وجدت أن استخدام 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>

حظا سعيدا.

9
Matt

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

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

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

6
Henry Neo

حل آخر ، يشبه إلى حد كبير 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()

4
abbaf33f

يوجد حل آخر لهذه المشكلة باستخدام إنشاء سمة جديدة أو توجيهات في الزاوي.

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

3
yugi

يمكنك أيضًا استخدام ng-include .

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

يمكنك استخدام "ng-show" لإظهار إخفاء بيانات القالب هذه.

3
Vikash Sharma

استعمال

<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>
1
Patricia Beier

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

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

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

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

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

1
bahri noredine

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

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

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

0
Alireza

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