預處理AngularJS輸出

Question

我想在更新任何HTML之前為AngularJS添加一個預處理步驟。 為了簡單起見，讓我們把所有hello實例都加粗。

也就是說，如果我們讓$scope.text = "hello world!" ，我們想以某種方式擁有

{{ text }}

在$digest周期中進行評估

<b>hello</b> world!

如果更改了$scope.text ，那么這當然會根據需要進行更新。

怎么做？ 優選地，它將是一個指令，因此將處理<div boldhello></div>中的任何表達式。

Answer 1

datasage的評論很明顯 - 這是一個過濾器的好地方。 這是一個基於文檔示例的基本過濾器，它替換了任何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注入（可能包含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>

預處理AngularJS輸出

問題描述

1 個解決方案

解決方案1
2 已采納 2015-12-27 01:02:02

預處理AngularJS輸出

問題描述

1 個解決方案

解決方案1 2 已采納 2015-12-27 01:02:02

解決方案1
2 已采納 2015-12-27 01:02:02