9

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

<div ng-controller="LeftController">

</div>

<div ng-controller="RightController">

</div>

并且可以说LeftController没有RightController. 但是如果RightController存在并且某些事情发生了变化……那么就LeftController需要了解这种变化。

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

用例

所以我要解决的问题是屏幕上有一些标签。用户可能有权访问任何一个选项卡,也可能没有访问权。

最初加载选项卡时,它会从服务器加载。

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

4

2 回答 2

15

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

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

我用这两个选项做了一个笨拙的人。我希望它对你有帮助。

Plunker - 示例

资料来源:

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

于 2013-10-22T10:37:15.103 回答
6

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

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!');
    }
);
于 2013-10-22T10:27:41.933 回答