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

Question

I have different views each created by a different controller. At a particular time only one of the views is visible.

I want to switch from one view to another view through a function of the controller of the first view and after that I want to call a method of the second view controller.

My problem is how should I call this method in an angular way?

I know the possiblity using $broadcast and $on but that smells a little bit.

The other choice ist to find the scope in the dom and calling the method via scope. But that is even more ugly.

What is the best solution?

Answer 1

You can use services to communicate between controllers. While you could create a generic shared service to have a central point to subscribe to and broadcast events, services are easier to maintain over time.

Answer 2

You can use Angular Routing

Check out the documentation. This is an excerpt from the documentation. You can make links like

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

For the first route and so on.

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'
      });
  }]);

Answer 3

Okay it is done and simpler as expected.

The idea is to use a service used in both views (controllers), that contains a 'execution boolean'.

The first view set the boolean to true, the second set a watch on this boolean and therefore is called and can call the desired method.

In the service:

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();
        }
    });
},

In the destination controller:

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

In the source controller:

sessionData.trigger('createSession');