tl;博士;

我需要传达几个服务需要的状态，并且源自绑定(bind)到 Controller 范围的数据。什么是好的和“Angular 禅宗”方式来做到这一点？

背景故事

我正在开发单页应用程序，经过深思熟虑后决定使用 AngularJS。页面的布局方式类似于:

实际的布局并不重要，对于类似的布局，概念保持不变。 我需要将绑定(bind)到 SettingsController 范围的信息传达给 ngView 中的 Controller 所需的服务。当用户对任何 slider 进行修改时，我还需要更新从 Controller 中的服务获取的内容。

我尝试过的

我想到的唯一方法是:http://jsfiddle.net/5sNcG/我必须自己编写一个绑定(bind)并将监听器添加到范围更改中。我可能离这里很远，并且有一种明显的“Angular ”方式可以做到这一点 - 但是尽管我付出了努力，我还是找不到它。

/code from fiddle.
var app = angular.module("myApp",[]);

app.controller("HomeCtrl",function($scope,FooService,$interval){
    FooService.change(function(){
        console.log("HI",FooService.getFoo());
        $scope.foo = FooService.getFoo();
    });
});

app.factory("Configuration",function(){
    var config = {data:'lol'};
    var callbacks = [];
    return {
        list:function(){ return config;},
        update:function(){
            callbacks.forEach(function(x){ x();});
        },
        change:function(fn){
            callbacks.push(fn); // I never remove these, so this is a memory leak!
        }
    }
});
app.service("FooService",function(Configuration){
    return {
        getFoo: function(){
            return Configuration.list().data+" bar";    
        },change:function(fn){
            Configuration.change(fn);    
        }
    }
});
app.controller("SettingsCtrl",function($scope,Configuration){

    $scope.config = Configuration.list();
    $scope.$watch('config',function(){
        Configuration.update();
    },true);
});

我也考虑过 $rootScope 广播，但这看起来更像全局状态

无论我尝试什么，我都有一个具有全局状态的单例，我们都知道 I don't want a singleton .

因为这似乎是一个相当常见的 Angular 用例。解决这个问题的惯用方法是什么？

最佳答案

我过去遇到过类似的事情，并考虑了四种可能的方法:

• 使用$broadcast
• 在 $rootScope 上存储设置
• 观察者模式(如您所见)
• 在 Controller 中使用 $watch

以下是我对每个问题的看法:

$广播

在我看到的 AngularJS 演示中，Miško Hevery 谈到了 $broadcast(即事件)的使用及其用例。要点是 $broadcast 更适用于对与您正在处理的任何事情没有紧密耦合的事件使用react，否则可能更可取。同样关于这个主题，Best Practices Angular wiki 上的指南建议:

Only use .$broadcast(), .$emit() and .$on() for atomic events: Events that are relevant globally across the entire app (such as a user authenticating or the app closing).

在这里，由于您的设置与填充 ng-view 的任何内容密切相关，因此建议使用 $broadcast 的替代方法更可取。

$rootScope

正如您提到的(并希望避免)，这是一个全局状态。向我的整个应用程序公开设置不是/不是我的个人偏好，尽管它通常是简单的选择。我个人保留 $rootScope 用于配置设置和“软”变量，如页面标题等。我不会选择使用此选项。

观察者模式

针对配置工厂注册回调是一种可靠的方法。关于持久回调，您可以在作用域上监听 $destroy 事件，调用配置工厂的 remove 方法来删​​除回调。这可以被认为是如何使用 $broadcast 的一个很好的例子； Controller 关注事件并且必须对其使用react，但事件本身并不特定于 Controller /配置服务共享的数据。

$ watch

通过使用共享服务，可以将其注入(inject)到任何与设置相关的 Controller 中。现在，对配置的任何更改都会触发您的回调，而某些 View 可能只与一两个配置设置有关。 $watch 将使您更容易观察仅对那些属性的更改。我不能说开销与注册回调，但这对我来说是最“有 Angular ”的方式。

这是如何使用 $watch 实现的:

var app = angular.module("myApp",[]);

app.factory("Configuration",function(){
   var data = {
     settingOne: true,
     settingTwo: false 
   };
   return data;
})

app.controller("SettingsCtrl",function($scope, Configuration){
  // do something
})

app.controller("HomeCtrl",function($scope, Configuration){
   // detect any change to configuration settings
   $scope.$watch(function() {
     return Configuration;
   }, function(data) {
     // do something
   }, true)

   // alternatively only react to settingTwo changing
   $scope.$watch(function() {
     return Configuration.settingTwo
   }, function(data) {
     // do something
   })
})

请注意，如果您需要稍微复杂一些的配置工厂，您可以转而使用 getter/setter 方法并将配置设置本身保密。然后，在 $watch 中，您应该监视方法调用而不是属性本身。

更新:

在回答时，我更喜欢在 Controller 中使用 $watch 的方法。在使用框架开发了一段时间后，我现在尝试将 $watch 完全置于 Controller 之外，而不是尽可能地在值发生变化时直接调用函数，或者通过利用 ng-change。

这样做的一个原因是它增加了测试 Controller 的复杂性，但也许更重要的是它效率低下:对于每个 $digest 循环 Angular 调用，每个注册的 $watch无论如何都会被评估，并且它很可能会响应对现有 $watch 的值所做的更改。

与其从这个 Angular 总结缺点和解决方案，不如在此处有一篇关于此问题的非常好的文章:Angular JS - you probably shouldn't use $watch in your controllers .

关于javascript - 如何将设置对象从 Controller 传递给服务？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21515106/