javascript 如何在 angular.js 中从另一个过滤器调用一个过滤器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20715726/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call one filter from another filter in angular.js
提问by Nikita
I have a filter, linkifyStuff, in which I want some variables processed using another filter. I can't figure out the syntax to call one filter from another.
我有一个过滤器，linkifyStuff，我想在其中使用另一个过滤器处理一些变量。我无法弄清楚从另一个过滤器调用一个过滤器的语法。
I know about filter chaining – that's not what I want to do. I want to apply a filter to a local variable in linkifyStuff filter, not to its input or output.
我知道过滤器链接——这不是我想要做的。我想将过滤器应用于 linkifyStuff 过滤器中的局部变量，而不是其输入或输出。
I would expect something like the folowing to work, but $filter('filtername') is not the correct syntax apparently.
我希望像下面这样的东西可以工作，但 $filter('filtername') 显然不是正确的语法。
module.filter('sanitizeStuff', function() {
// ...
})
module.filter('prettifyStuff', function() {
// ...
})
module.filter('linkifyStuff', function($filter) {
return function(text) {
// ...
// ...
return $filter('sanitizeStuff')(foo) + ' whatever ' + $filter('prettifyStuff')(bar)
}
})
I could write a plain js functions for sanitizeStuff and sanitizeStuff and call that function from these filters but this seems wrong. Any advice on how to do it the angular way?
我可以为 sanitizeStuff 和 sanitizeStuff 编写一个普通的 js 函数，并从这些过滤器中调用该函数，但这似乎是错误的。关于如何以角度方式做到这一点的任何建议？
Thank you.
谢谢你。
回答by Khanh TO
Inject your filters into linkifyStuffusing <filterName>Filtersyntax. Like this:
将过滤器注入linkifyStuffusing<filterName>Filter语法。像这样：
app.filter('linkifyStuff', function(sanitizeStuffFilter,prettifyStuffFilter) {
return function(text) {
return sanitizeStuffFilter(text) + ' whatever ' + prettifyStuffFilter(text);
}
});
回答by rjm226
I've ran into something like this before when filtering comment inputs. I had 4 different filters, when the user clicked submit it would run a function that would run all 4 filters on the comment copy. Threw my filters in there for good measure. WARNING: Make sure you inject $filter into your controller, I hate when I forget to inject things. Here is the code:
我以前在过滤评论输入时遇到过这样的事情。我有 4 个不同的过滤器，当用户单击提交时，它将运行一个函数，该函数将在评论副本上运行所有 4 个过滤器。把我的过滤器扔在那里，以备不时之需。警告：确保将 $filter 注入控制器，我讨厌忘记注入东西。这是代码：
INJECTION:
注射：
.controller('Controller', function ($scope, $filter){
//CODE GOES HERE
});
HTML:
HTML：
<ul ng-repeat="comment in comments">
<li>{{comment.user_name}}</li>
<li dynamic="deliberatelyTrustDangerousSnippet(comment.comment_copy)"></li>
</ul>
CONTROLLER:
控制器：
$scope.deliberatelyTrustDangerousSnippet = function(comment) {
comment = $filter('breaks')(comment);
comment = $filter('links')(comment);
comment = $filter('images')(comment);
comment = $filter('youtubeLinks')(comment);
return comment;
};
FILTERS:
过滤器：
.filter('breaks', function () {
return function (text) {
if (text !== undefined) return text.replace(/ /g, '<br />');
};
})
.filter('links', function () {
return function (text) {
if (text !== undefined){
return text.replace(/(?:http:\/\/)?(?:www\.)?((?:[\w-\.]*)(?:\.(?:com|net|org|co|be))(?:(?:[\/?\w?=?&?(?:&)?\.?-]*)))/g, '<a target="_blank" href="http://"></a>');
}
};
})
.filter('images', function () {
return function (text) {
if (text !== undefined){
return text.replace(/(?:<.*=")(.*(?:(?:\.(?:jpg|JPG|png|PNG|gif|GIF|jpeg|JPEG))))(?:")(?:.*(?:<\/a>))/g, '<img src=""/>');
}
};
})
.filter('youtubeLinks', function () {
return function (text) {
if (text !== undefined){
return text.replace(/(?:<.*=")(?:(?:(?:(?:http:\/\/)|(?:www\.)|(?:http:\/\/www\.))(?:(?:youtube\.com.*v=)|(?:youtu\.be\/))((?:\w|\d|-)*)(?:(?:&feature=related)?)))(?:")(?:.*(?:<\/a>))/g, '<youtube id=""></youtube>');
}
};
})
回答by Kevin Chung
@useless asked if there was "any way to do this for default filters."
@useless 询问是否“有任何方法可以为默认过滤器执行此操作”。
A round-about way to use default filters: pipe it through the standard filter before passing it to your custom filter and pass the original value as a parameter.
使用默认过滤器的一种迂回方式：在将其传递给自定义过滤器之前通过标准过滤器将其通过管道并将原始值作为参数传递。
For example your Angular expression would look like this:
例如，您的 Angular 表达式如下所示：
{{myDate | date: 'mediumDate' | relativeDate: myDate}}
And your filter:
还有你的过滤器：
var myApp = angular.module('myApp',[]);
myApp
.filter('relativeDate', function() {
return function(formattedDate, dateStr) {
var returnVal = formattedDate,
today = new Date(),
evalDate = new Date(dateStr);
if (today.getFullYear() == evalDate.getFullYear() &&
today.getMonth() == evalDate.getMonth() &&
today.getDate() == evalDate.getDate()) {
returnVal = 'Today'
}
return returnVal
}
})
.controller('myAppCtrl', ['$scope', function myAppCntrl($scope) {
$scope.myDate = "2001-01-01T01:01:01";
});
回答by Sajan Shakya
app.filter('linkifyStuff', function(sanitizeStuffFilter,prettifyStuffFilter) {
return function(text) {
return sanitizeStuffFilter(text) + ' whatever ' + prettifyStuffFilter(text);
}
});
this didnt work out for me. if anyone has problem with the above code. you can try this which worked out for me pretty well.
这对我不起作用。如果有人对上面的代码有问题。你可以试试这个对我来说效果很好。
app.filter('linkifyStuff', function($filter) {
return function(text) {
return $filter('sanitizeStuffFilter')(text) + ' whatever ' + $filter('prettifyStuffFilter')(text);
}
});
回答by Himanshu Pathak
Latest way example:
最新方式示例：
angular.module('myApp.shared.shared-filters', [])
.filter('capitalize', ['$filter', function($filter) {
return function(input) {
return $filter('uppercase')(input.charAt(0)) + $filter('lowercase')(input.substr(1));
}
}]);
