如何在 Angular js 中返回 html 代碼作為過濾器的輸出

Question

我編寫了一個匹配模式的自定義過濾器，如果匹配為真，則將其轉換為 html，如何將 html 輸出綁定到 {{test | toimgsrc}} 我不想使用 ng-bind-html 或 $sce 還有其他方法嗎？ 這是我的代碼

 angular.module('demoApp', ['toimage']) .controller('MainController', function($scope) { $scope.test = '*!dsfsdfsdfsdfsdfsd!*'; }); angular.module('toimage', []).filter('toimgsrc', function() { return function(text) { regex = /^\\*!(\\w*)!\\*$/; if (regex.test(text)) return text.replace(/^\\*!(\\w*)!\\*$/, '<h2 class="bolder">"$1" </h2>') else return text; } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script> <div ng-app="demoApp" ng-controller="MainController as mainCtrl"> {{test | toimgsrc}} <div>

Answer 1

正如角度文檔所說：

https://docs.angularjs.org/api/ng/service/$sce

默認情況下，Angular 僅從與應用程序文檔相同的域和協議中加載模板。 這是通過在模板 URL 上調用 $sce.getTrustedResourceUrl 來完成的。 要從其他域和/或協議加載模板，您可以將它們列入白名單或將其包裝為受信任的值。

這意味着您正在將值轉換為 html，這也需要安全，這就是解決該問題的唯一方法是使用 $sce 的原因，如下所示：

$scope.trustedHtml = $sce.trustAsHtml(yourGeneratedHtml);


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

主要原因是角度處理的安全策略。