通知可能存在或不存在的控制器之间的更改

Question

如果页面上有两个区域,即

<div ng-controller="LeftController">

</div>

<div ng-controller="RightController">

</div>

并且让我们说LeftController可以生存和存在而没有RightController.但是,如果RightController存在并且发生了变化......那么LeftController需要了解这种变化.

LeftController知道如何订阅这些更改？这需要像Amplify这样的框架,还是可以在Angular中处理？

用例

所以我正在解决的问题是屏幕上的一些标签.用户可以访问或不访问任一选项卡.

最初加载选项卡时,它将从服务器加载.

Tab 2(RightController)可以在Tab 1(LeftController)之前加载,如果Tab 1不存在或尚未加载,则Tab 2发布更改.什么都没发生.如果加载了选项卡1,则用户转到选项卡2,更改一个值,这可能会影响选项卡1中的UI.因此选项卡2会发布他已更改.选项卡1现在根据新信息更改所需内容.

Answer 1

有两种方法可以做到这一点:

1. 使用事件(在范围内发出或广播)
2. 使用服务/工厂

我用这两个选项做了一个傻瓜.我希望它对你有所帮助.

Plunker - 例子

资料来源:

http://docs.angularjs.org/api/ng.$ rootScope.Scope http://docs.angularjs.org/guide/dev_guide.services.creating_services

Answer 2

您可以创建一个简单的服务并将其注入两个控制器.

app.factory('myService', function() {
    var onMessageCallbacks = [];
    var onMessage = function(cb) {
        onMessageCallbacks.push(cb);
    };

    var newMessage = function(msg){
        for (var cb in onMessageCallbacks) {
            onMessageCallbacks[cb](msg);
        }
    };

    return {
        onMessage: onMessage,
        newMessage: newMessage
    };
});

首先,您使用onMessage订阅事件:

app.controller('LeftController',
    function LeftController($scope, myService) {
        myService.onMessage(function(receivedMsg){
            // do sth...
        });
    }
);

当其中一个控制器想要说些什么时,请使用newMessage:

app.controller('RightController',
    function RightController($scope, myService) {
        myService.newMessage('Hello!');
    }
);