AngularJS：来自服务的数据未更新答案

【问题标题】：AngularJS: Data from service is not updatedAngularJS：来自服务的数据未更新
【发布时间】：2014-10-27 14:43:49
【问题描述】：

我有一个模板，它从服务中获取数据。服务中的数据由指令更新。

数据更新后，不会在模板中更新。

// In my template
{{service.get()}}

// In my service
.service('service', function($http){
    var _val = 5;

    return{
        get:function(){
            return val;
        },
        set:function(val){
            _val = val;
        }
    };
});

// In my directive
var someDirective = angular.module('app.someDirective',[]);

someDirective.directive('someDirective', ['service', function(service) {
    return function(scope, element, attrs){
        $(element).on('scroll', function(event){
            service.set(15);
        });
    };
}]);

如果我在任何其他地方（如其他控制器）调用 service.set(x)，它可以 100% 正常工作。

也许有人知道，我做错了什么。（非常感谢）

编辑为了更清楚一点：

当页面加载时，显示“5”（正确）。但是当值应该更新时，service.set() 函数被正确调用（来自指令），但模板中没有任何变化。

如果我调用 service.set() 其他方法，它可以工作（值在模板中更新）。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您的事件发生在摘要周期之外。最简单的修复：

$timeout(function() {
    service.set(15);
});

【讨论】：

非常感谢。就是这样。工作 100% 完美，它应该如何。但我真的不明白这里的问题是什么，以及 $timeout 有什么帮助。
$timeout 安排代码在下一个摘要循环中运行。由于某种原因，当 $digest 已经执行完观察者时，您的事件就会发生。所以你可以手动指示它再次运行。

【解决方案2】：

快速解决方法是将集合包装在 $timeout 中。事情没有得到更新的原因是，当$(element).on 触发时，angular 不知道运行摘要。解决此问题的另一种方法是使用$evalAsync。

【讨论】：