从模板函数调用多次 [英] function called multiple times from template

问题描述

在我的模板我有这样的事情：

In my template I have something like this:

{{formatMyDate(date)}}

但日期是不是立即可用，因此这个前pression会调用该函数范围的变量 formatMyDate（）多次（返回未定义）之前返回正确的值。

but date is a scope variable that is not immediately available so this expression will call the function formatMyDate() many times (returning undefined) before returning the correct value.

我可以检查日期不在函数内空，但我想它会更干净不要调用该函数在所有如果日期是空。

I could check if the date is not null within the function but I guess it would be more clean NOT to call the function at all if the date is null.

任何方式实现这一目标？
将一个自定义过滤器帮助我在这里？

Any way to achieve this? Would a custom filter help me out here?

编辑：结果
有人建议，这种行为可能是正常的，这取决于$消化周期。结果
然后，我已经把范围。$看来验证多少次日期正在改变的值。

请注意，我在一个指令定义这些。

It was suggested that this behaviour could be normal, depending on the $digest cycle.
I've then put a scope.$watch to verify how many times the value of date is changing.
Note that I'm defining these in a directive.

scope.$watch('date', function(value){
  console.log('watched_date: ' + value)
})

和我介绍了一个的console.log（）在我的 formatMyDate 功能以及

and I've introduced a console.log() on my formatMyDate function as well

scope.formatMyDate = function(date){
  console.log("called_date: " + date)
  return dateService.format(date, 'YYYY-MM-DD')
}

检查控制台我得到（伪code）

Inspecting the console I get (pseudo code)

called_date: undefined
watched_date: undefined
called_date: undefined // many many times (around 20/30)
called_date: correctValue //2 or 3 times 
watched_date: correctValue 
called_date: correctValue //other 3/4 times

我想知道如果这仍然是由于 $消化周期或它在我的code错误

I'm wondering if this is still due to the $digest cycle or it is a bug in my code

推荐答案

我会建议你做不同的事情：

I would recommend you to do things differently:

无论使用日期 $过滤器 或者如果你正在做的事情非常独特和日期 $过滤器不够好适合你，那么你可以创建自己的 $过滤器，就像这样：

Either use the date $filter or if you are doing something VERY unique and the date $filter is not good enough for you, then you could create your own $filter, like this:

app.filter('formatMyDate', function () {
    return function (date) {
        if (!date) return "";
        var result;
        //your code here    
        return result;
    };
});

而在你的模板中使用这样的：

And use it like this in your template:

{{date | formatMyDate}}

更新：

我想我不太回答你的问题，我只给你如何提高你的code建议。这一次，我会尽量回答你的问题：

UPDATE:

I guess that I didn't quite answer your question, I just gave you advice on how to improve your code. This time I will try to answer your question:

借助 $消化周期的阶段其中角保证了模型的变化相继落户，
这样它可以呈现与更新的变化的图。为了做到这一点，
角开始一个循环，其中每次迭代评估所有的模板前pressions
看来，还有 $守望者的 $范围的功能。
如果在当前迭代的结果是一样的previous之一，
然后将角退出循环。否则，将再试一次。
如果经过10次的事情还没有解决，角将退出
与错误：的 Infite $消化环路误差的（infdig） 。

The $digest cycle is the stage in which Angular ensures the changes of the model have settled, so that it can render the view with the updated changes. In order to do that, Angular starts a loop in which each iteration evaluates all the template expressions of the view, as well as the $watcher functions of the $scope. If in the current iteration the result is the same as the previous one, then Angular will exit the loop. Otherwise, it will try again. If after 10 attempts things haven't settled, Angular will exit with an error: The "Infite $digest Loop Error" (infdig).

这就是为什么第一次， $消化周期运行所有前任pressions评估（至少）的两倍。然后每当你做出改变的 $范围或者在 $观察家 S的一个 $范围被触发，则 $消化周期会，以确保事情已经解决再次运行，所以你的前pressions将再次评估。这是怎么角使数据绑定发生，这是一个正常的行为。

That's why the first time that the $digest cycle runs all the expressions are evaluated (at least) twice. And then Every time that you make a change to the $scope or that one of the $watchers of the $scope gets triggered, the $digest cycle will run again in order to make sure that things have settled, so your expressions will be evaluated again. This is how Angular makes "data-binding" happen, it's a normal behaviour.

所以你的情况，当你的模板你这样做： {{formatMyDate（日期）}} 或本 {{日期| formatMyDate}} 您定义将每一次评估前角pressions的 $消化周期运行，正如你可以想象是非常频繁。这就是为什么是非常重要的，以确保在 $滤镜，您在您的视图中使用（或功能）是有效的和无状态的。

So in your case, when in your template you do this: {{formatMyDate(date)}} or this {{date | formatMyDate}} you're defining Angular expressions that will be evaluated every time that the $digest cycle runs, which as you can imagine is very often. That's why is very important to make sure that the $filters (or functions) that you use in your view are efficient and stateless.

这篇关于从模板函数调用多次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！