Hình thức thanh toán thoát HTML {{expression}} của thanh công cụ được trả lại trong khi biểu mẫu {{{expression}}} của nó không. Có cách nào để thêm tính năng này vào các mẫu AngualarJS để chúng tôi có thể sử dụng {{expression}} cho đầu ra được vệ sinh thường xuyên và {{{expression}}} cho các biểu thức HTML đáng tin cậy, không thoát được không?Cách sử dụng cú pháp {{{}}} cho html đáng tin cậy?
Nhân tiện, tôi quen với chỉ thị ng-bind-html.
Trả lời: Câu trả lời ngắn gọn là không. Tôi đã không bao giờ đi qua một cấu hình như vậy. Bạn không thể sử dụng {{{}}} để làm việc trong Angular.
Giải pháp hữu ích: Không thể nhận HTML chưa được thoát/không an toàn vào chế độ xem qua phạm vi mà không sử dụng chỉ thị ng-bind-html. Bạn có thể thêm hoặc một hàm helper để điều khiển của bạn hoặc thêm một bộ lọc có thể làm cho nó một chút dễ dàng hơn để sử dụng ng-bind-html (Plunk here), nhưng bạn vẫn có vẻ cần ng-bind-html:
var app = angular.module('plunker', ['ngSanitize']);
app.controller('MyController', function($scope, $sce) {
$scope.someHtmlContent = "Label: <input name='test'>";
$scope.h = function(html) {
return $sce.trustAsHtml(html);
};
});
app.filter('trustAsHtml', function($sce) { return $sce.trustAsHtml; });
Sau đó, bạn sẽ sử dụng nó như thế này:
<body ng-controller="MyController">
<div ng-bind-html="someHtmlContent | trustAsHtml">
</div>
<div ng-bind-html="h(someHtmlContent)">
</div>
</body>
Tôi không nhận được điểm trong câu trả lời. – PHPst
@PHPst Câu trả lời là "không". Bạn không thể làm những gì bạn muốn. Phần còn lại của câu trả lời cho thấy cách bạn có thể sử dụng một bộ lọc hoặc một hàm trợ giúp để làm cho việc sử dụng lệnh ng-bind-html dễ dàng hơn một chút, điều này là cần thiết để đặt HTML chưa thoát vào khung nhìn. Bạn cần ng-bind-html. –
"... hoặc thêm một bộ lọc có thể làm cho nó dễ dàng hơn một chút để sử dụng" Làm thế nào để nó trở nên dễ dàng hơn? Nó có vẻ lộn xộn hơn. – PHPst
Nếu bạn thực sự muốn sử dụng {{{}}}, có thể:
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('{{{');
$interpolateProvider.endSymbol('}}}');
});
Tuy nhiên nó không phải là khả năng để làm điều đó chỉ fo r đáng tin cậy html. Tất cả các dấu phân cách của bạn sẽ thay đổi.
Điều này dường như trả lời một số câu hỏi, nhưng không phải câu hỏi này –
Đây thực sự là một vấn đề không cần thiết, và những gì sau, là một giải pháp không cần thiết thậm chí nhiều hơn :) Nhưng chỉ để cho vui, bạn có thể làm một cái gì đó như sau: phân tích cú pháp HTML và thay thế tất cả các trường hợp phát hiện của {{{ và }}} với ng-bind-html . Tôi sử dụng lại các phương pháp lọc trên để thực sự làm $sce.trustAsHtml:
app.directive("trust", function($compile){
return {
terminal: true,
priority: 4000,
link: function(scope, elem){
var html = elem.html();
var re = /({{{)([^}]+)(}}})/g;
var newHtml = html.replace(re, '<span ng-bind-html="$2 | trustAsHtml"></span>');
elem.html(newHtml);
elem.removeAttr("trust");
$compile(elem)(scope);
}
};
})
.filter('trustAsHtml', function($sce) { return $sce.trustAsHtml; });
Cách sử dụng:
<div trust>
{{{html()}}}
<div>
{{{foo}}}
</div>
</div>
Ông có thể cung cấp một ví dụ về những gì bạn muốn làm gì? Câu hỏi của bạn khá mơ hồ. – JLRishe
Về mặt lý thuyết (Tôi đã không thử điều này và thời gian của tôi sẽ không cho phép tôi làm điều đó bây giờ) người ta có thể thay đổi/mở rộng mô hình khuôn mẫu của Angular để cho phép một điều như vậy. Điều đó nói rằng, cá nhân tôi nghĩ rằng không thoát HTML trong các mẫu là một trường hợp ngoại lệ, mà nên được sử dụng một cách tiết kiệm và với sự chăm sóc đặc biệt, và như vậy một mod sẽ đi ngược lại điều này. –