我在尝试使用异步数据初始化过滤器时遇到问题。
过滤器非常简单,它需要将路径转换为名称,但要做到这一点,它需要一个对应数组,我需要从服务器获取该数组。
在返回函数之前,我可以在过滤器定义中执行一些操作,但是异步方面阻止了这种情况
angular.module('angularApp').
filter('pathToName', function(Service){
// Do some things here
return function(input){
return input+'!'
}
}
使用承诺可能是可行的,但我对角度负载如何过滤没有任何清晰的了解。
这post解释了如何通过服务实现如此神奇的效果,但是是否可以对过滤器做同样的事情呢?
如果有人对如何翻译这些路径有更好的想法,我会洗耳恭听。
EDIT:
我尝试使用承诺方法,但有些不对劲,而且我看不出是什么:
angular.module('angularApp').filter('pathToName', function($q, Service){
var deferred = $q.defer();
var promise = deferred.promise;
Service.getCorresp().then(function(success){
deferred.resolve(success.data);
}, function(error){
deferred.reject();
});
return function(input){
return promise.then(
function(corresp){
if(corresp.hasOwnProperty(input))
return corresp[input];
else
return input;
}
)
};
});
我对承诺不太熟悉,这是使用它们的正确方法吗?
这是一个例子:
app.filter("testf", function($timeout) {
var data = null, // DATA RECEIVED ASYNCHRONOUSLY AND CACHED HERE
serviceInvoked = false;
function realFilter(value) { // REAL FILTER LOGIC
return ...;
}
return function(value) { // FILTER WRAPPER TO COPE WITH ASYNCHRONICITY
if( data === null ) {
if( !serviceInvoked ) {
serviceInvoked = true;
// CALL THE SERVICE THAT FETCHES THE DATA HERE
callService.then(function(result) {
data = result;
});
}
return "-"; // PLACEHOLDER WHILE LOADING, COULD BE EMPTY
}
else return realFilter(value);
}
});
This fiddle是使用超时而不是服务的演示。
编辑:根据 sgimeno 的评论,必须格外小心,不要多次调用该服务。请参阅serviceInvoked
上面的代码和小提琴的变化。另请参阅 Angular 1.2.1 的 fork fiddle 和用于更改值并触发摘要周期的按钮:叉形小提琴
编辑 2:根据 Miha Eržen 的评论,此解决方案不再适用于 Angular 1.3。不过,解决方案几乎是微不足道的,使用$stateful
过滤标志,已记录here在“状态过滤器”下,以及必要的叉形小提琴.
Do note该解决方案会损害性能,因为每个摘要循环都会调用过滤器。性能下降可能可以忽略不计,也可以忽略不计,具体取决于具体情况。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)