从模板中多次调用的函数

Question

在我的模板中,我有这样的事情:

{{formatMyDate(date)}}

但是date是一个不能立即使用的范围变量,因此该表达式将在返回正确的值之前formatMyDate()多次调用该函数(返回undefined).

我可以检查date函数中是否为空,但我想它会更干净如果date是的话根本不调用函数null.

有没有办法实现这个目标？自定义过滤器会帮助我吗？

编辑:
有人建议这种行为可能正常,具体取决于$摘要周期.
然后我用一个scope.$watch来验证价值date变化的次数.
请注意,我在指令中定义了这些.

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

我也在我的formatMyDate函数上引入了console.log()

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

检查我得到的控制台(伪代码)

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

我想知道这仍然是由于$digest循环还是我的代码中的错误

Answer 1

我建议你做不同的事情:

要么使用日期,$filter要么你正在做一些非常独特的事情并且日期$filter不够好,那么你可以创建自己的日期$filter,如下所示:

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

并在模板中使用它:

{{date | formatMyDate}}

更新:

我想我没有完全回答你的问题,我只是就如何改进你的代码给了你建议.这次我会尝试回答你的问题:

在$消化周期是在角保证了模型的变化相继落户,使之能渲染更新的变化视图的阶段.为了做到这一点,角开始一个循环中,每次迭代计算的视图的所有模板表情,还有$watcher的功能$scope.如果在当前迭代中结果与前一个结果相同,则Angular将退出循环.否则,它会再试一次.如果在10次尝试之后事情还没有解决,Angular将退出并出现错误:" Infite $ digest Loop Error "(infdig).

这就是为什么第一次$digest循环运行所有表达式都会被评估(至少)两次.然后每当你对触发$scope的$watchers 或其中一个进行更改时$scope,$digest循环将再次运行以确保事情已经解决,因此将再次评估表达式.这就是Angular如何使"数据绑定"发生,这是一种正常的行为.

因此,在您的情况下,当您在模板中执行此操作时: {{formatMyDate(date)}}或者{{date | formatMyDate}}您正在定义将在每次$digest循环运行时进行评估的Angular表达式,这是您经常可以想象的.这就是为什么确保$filters您在视图中使用的(或函数)高效且无状态非常重要的原因.