gpt4 book ai didi

javascript - 预处理 AngularJS 输出

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:14:47 26 4
gpt4 key购买 nike

我想在 AngularJS 更新任何 HTML 之前添加一个预处理步骤。为了简单起见,让我们将 hello 的所有实例都加粗。 .

也就是说,如果我们让$scope.text = "hello world!" , 我们想以某种方式拥有

{{ text }}

$digest 期间评估循环进入

<b>hello</b> world!

如果$scope.text已更改,这当然会根据需要进行更新。

这将如何完成?最好是指令,以便 <div boldhello></div> 中的任何表达式将被处理。

最佳答案

datasage's comment就在现场 - 这是过滤器的好地方。这是改编自 the documentation examples 的基本过滤器将 hello 的任何实例替换为被粗体标记包围的实例:

(function(angular) {
'use strict';
angular.module('myFilterApp', [])
.filter('boldHello', function($sce) {
return function(input) {
input = input || '';
var out = input.replace(/hello/gi, function(text) {
return '<b>' + text + '</b>';
});
return out;
};
})
.controller('MyController', ['$scope', function($scope) {
$scope.greeting = 'Oh, hello, my friend.';
}]);
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myFilterApp">
<div ng-controller="MyController">
<input ng-model="greeting" type="text"><br>
No filter: {{greeting}}<br>
Bold: {{greeting | boldHello}}<br>
</div>
</body>

但是,唉,标签打印在输出中!那是因为 Angular 可以防止意外的 HTML 注入(inject)(可能包含 script 标签),所以我们需要明确标记它是安全的。您使用 trustAsHtml 将其标记为安全,我们需要使用 ng-bind-html 指令将结果放入您的模板。

(function(angular) {
'use strict';
angular.module('myFilterApp', [])
.filter('boldHello', function($sce) {
return function(input) {
input = input || '';
var out = input.replace(/hello/gi, function(text) {
return '<b>' + text + '</b>';
});
return $sce.trustAsHtml(out);
};
})
.controller('MyController', ['$scope', function($scope) {
$scope.greeting = 'Oh, hello, my friend.';
}]);
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myFilterApp">
<div ng-controller="MyController">
<input ng-model="greeting" type="text"><br>
No filter: {{greeting}}<br>
Bold: <span ng-bind-html="greeting | boldHello"></span><br>
</div>
</body>

关于javascript - 预处理 AngularJS 输出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34475691/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com