角度观察带有参数值的函数答案

【问题标题】：Angular watching a function with parameter values角度观察带有参数值的函数
【发布时间】：2015-05-02 17:15:39
【问题描述】：

我正在遍历Jobs 的列表，就像这样，（为演示而简化）。

我可以超级简单地访问Jobs 数组中的信息，就像这样（Job.Name、Job.Date 等）

<div ng-repeat="(key, Job) in Jobs" ng-show="Job.Status=='Active'">
    <div class="newMessages">
        {{hasNewCreatorMessages(Job.$id)}} New Messages
    </div>
</div>

但是，我创建了一个函数来计算我正在访问的该作业中留下的消息数量，就像上面的变量一样，这里是完整的函数：

$scope.hasNewCreatorMessages = function(jobID) {
        var numNewMessages = 0;
        var messages = firebase.child('messages');
        messages.on('value', function(snap){
            snap.forEach(function(child){
                child.forEach(function(message){
                    if(jobID == message.val().jobID && message.val().newCreatorMessage) {
                        numNewMessages += 1;
                    }
                });
            });
        });
        console.log(numNewMessages);
        return numNewMessages;
    };

控制台输出正确数量的新消息（因此计数器和函数正常工作）。问题是在实际的 html 视图中它没有更新，我觉得它与 Angular Digest （我不完全理解）有关。有时当我从缓存访问页面时，它可以正常工作，但如果我进行硬刷新，它不会显示计数。

【问题讨论】：

这是一个相当大的混乱。你在这里使用 AngularFire 吗？ $id 建议如此。解释什么是 Jobs 以及它是如何创建的其余代码在哪里。在这里提供任何有意义的建议将非常困难。见creating an mcve。

标签： angularjs firebase

【解决方案1】：

您的问题是您的函数 $scope.hasNewCreatorMessages 仅在 dom 被角度解析时运行，或者当您的 $scope.Jobs 更新时（根对象，而不是子对象）。

为了解决您的问题，您应该在控制器内部添加一个$watch，它将触发一个函数，该函数将更新您的$scope 中的一个数组：

在您的控制器内部，当它被实例化时，您会执行类似的操作：

$scope.arrayOfCounters = [];

for (var i = 0; i< $scope.Jobs.length; i++){
     $scope.arrayOfCounters.push(integerCalculatedByAFunction);
}

然后，您将手表注册到您的工作中

$scope.watchCollection('Jobs.something.messages', function(){
    //Update your array here

    //Do not $scope.arrayOfCounters = [];   <= this creates a new reference and the view wont be updated.
    // But do instead $scope.arrayOfCounters.length = 0;
});

抱歉没有对watchCollection的解释，我现在有，但没用过。

【讨论】：