[英]how to apply a filter for an attribute?
Please help solve the problem. 请帮助解决问题。
I write custom filter for text. 我为文本编写自定义过滤器。 in first case i output myText and apply filter, result is OK 在第一种情况下,我输出myText并应用过滤器,结果正常
html: 的HTML:
<div ng-app="main4">
<md-content ng-controller="main4Ctrl">
<h2 class="md-display-1 ng-binding">Главная страница 3</h2>
<sapn id="firstCase">{{myText | transform}}</sapn> - it worked
<hr>
<span id="secondCase" ng-bind-html="myText"/> - but it not worked
</md-content>
</div>
js: js:
angular.module('main4', [])
.controller('main4Ctrl', ['$rootScope', '$scope', '$timeout',
function($rootScope, $scope, $timeout) {
$scope.myText = 'qWeRtYuIoP';
}
]).filter('transform',[function(){
return function(text){
return transformTetx = text.toLowerCase();
}
}]);
I need apply this filter for second case 我需要在第二种情况下应用此过滤器
You'll need angular sanitize
in order to use ng-bind-html
您需要进行angular sanitize
才能使用ng-bind-html
angular.module('main4', ['ngSanitize'])
.controller('main4Ctrl', ['$rootScope', '$scope', '$timeout',
function($rootScope, $scope, $timeout) {
$scope.myText = 'qWeRtYuIoP';
}
]).filter('transform',[function(){
return function(text){
return transformTetx = text.toLowerCase();
}
}]);
<span id="secondCase" ng-bind-html="myText | transform"></span>
I have updated your FIDDLE 我已更新您的FIDDLE
Make sure that you use the same version of angular-sanitize.js
as of the angular.js
. 确保使用与angular.js
相同的angular-sanitize.js
版本。 This is very important 这个非常重要
If you want to apply your filter from your controller, you can do the following: 如果要从控制器应用过滤器,则可以执行以下操作:
Inject the $filter
service and call it by using 注入$filter
服务,并使用进行调用
var transformedData = $filter('transform')(dataToTransform);
or 要么
You can inject transformFilter
into your controller and directly use it. 您可以将transformFilter
注入到控制器中并直接使用它。
var transformedData2 = transformFilter(dataToTransform);
Angular will automatically recognize that transform
is a filter. Angular会自动识别出transform
是一个过滤器。
You should use ng-bind on the span element instead. 您应该在span元素上使用ng-bind。 Here's the working fiddle 这是工作的小提琴
<div ng-app="main4">
<md-content ng-controller="main4Ctrl">
<span id="firstCase">{{myText | transform}}</span> - it worked
<hr>
<span id="secondCase" ng-bind="myText | transform"></span> - but it not worked
</div>
var app = angular.module('main4', []);
app.controller('main4Ctrl', ['$rootScope', '$scope', '$timeout',
function($rootScope, $scope, $timeout) {
$scope.myText = 'qWeRtYuIoP';
}
])
app.filter('transform',[function(){
return function(text){
return transformTetx = text.toLowerCase();
}
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.