AngularJS：不同视图中控制器之间的通信答案

【问题标题】：AngularJS: Communication between controllers in different viewsAngularJS：不同视图中控制器之间的通信
【发布时间】：2015-08-18 04:57:33
【问题描述】：

我有不同的视图，每个视图由不同的控制器创建。在特定时间，只有一个视图是可见的。

我想通过第一个视图控制器的功能从一个视图切换到另一个视图，然后我想调用第二个视图控制器的方法。

我的问题是我应该如何以有角度的方式调用这个方法？

我知道使用 $broadcast 和 $on 的可能性，但这有点难闻。

另一种选择是在 dom 中查找作用域并通过作用域调用方法。但这更难看。

什么是最好的解决方案？

【问题讨论】：

你使用的是 ngRoute 还是 UI Router...？
你不会只使用路由和$location.path('/whatever'); 吗？
如果我理解您的问题正确，您可以收听视图更改event from routers。或者对于一般的发布/订阅通信，您也可以create a pub/sub service。无论哪种方式，它将通过事件/回调机制，考虑到您可以获得的失去耦合，这并没有那么糟糕。即使使用像 flux 这样的模式事件是通过调度程序/发射器使用。
路由不是问题，但是我没用路由器。它更像是在视图中有不同的选项卡，如果您选择一个选项卡，则会创建相应的控制器并呈现视图。问题是在实际/第一个视图的控制器内调用目标/第二个视图控制器的方法。从一个视图切换到另一个视图只需更改活动视图模型即可。

标签： javascript angularjs controller communication

【解决方案1】：

您可以使用服务在控制器之间进行通信。虽然您可以创建一个通用共享服务来拥有一个订阅和广播事件的中心点，但随着时间的推移，服务更易于维护。

【讨论】：

是的，服务似乎是个好主意，但这只能使用事件吗？以及如何在控制器中触发将焦点设置到输入字段并选择其内容的方法？

【解决方案2】：

您可以使用Angular Routing

查看文档。这是文档的摘录。您可以制作类似的链接

<a href="#/phones">Link</a>

对于第一条路线，依此类推。

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

【讨论】：

它更像是在视图中有不同的选项卡，我想以编程方式从第一个切换到第二个，然后调用第二个视图的方法。
您可以查看Angular UI Bootstrap's 标签实现。 Click here 获取代码
@dec 你检查了吗？
是的，但我已经有了标签。我的问题是在不同的控制器中调用一个函数......或者我没有明白这一点。我已经在上面发布了我的解决方案。

【解决方案3】：

好的，正如预期的那样，它已经完成并且更简单了。

这个想法是使用在两个视图（控制器）中都使用的服务，它包含一个“执行布尔值”。

第一个视图将布尔值设置为 true，第二个视图在此布尔值上设置了一个监视，因此被调用并可以调用所需的方法。

在服务中：

trigger: function(name) { model[name] = true; },
setTriggerWatch: function(scope, name, callback) {
    scope.$watch(function value() {
        return model[name];
    }, function listener(newValue, oldValue) {
        if (newValue) {
            callback();
        }
    });
},

在目标控制器中：

sessionData.setTriggerWatch($scope, 'createSession', function callCreateSession() {
    _createSession();
});

在源控制器中：

sessionData.trigger('createSession');

【讨论】：