هل من الممكن إنشاء جزء 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>
من أجل 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.trustAsHtml()
في وحدة التحكم لتحويل سلسلة html.
$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);
هناك خطوتين:
تشمل المورد 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>
ملاحظة : عامل التصفية هذا يثق في أي وكل أتش تي أم أل مرت عليه ، ويمكن أن يقدم ثغرة 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>
يمكنك أيضًا استخدام 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>