Example analysis of communication mechanism between Controllers in Angularjs

The example in this article describes the communication mechanism between Controllers in Angularjs. Share it with everyone for your reference, the details are as follows:

In some experience summaries in Angularjs development, it was mentioned that we need to distinguish angular controllers according to business to avoid overly large and omnipotent god controllers. We separated the controllers, but sometimes we You need to communicate in the controller, which is generally a relatively simple communication mechanism. Tell your companion controller that something you care about has changed. What should you do? If you are a JavaScript programmer you will naturally think of asynchronous callback reactive communication - event mechanism (or message mechanism). Yes, this is the mechanism of angularjs to solve the communication between controllers. It is the only recommended way. In short, this is the angular way.

Angularjs provides us with bubbling and tunneling mechanisms in the scope. $broadcast will broadcast the event to all child controllers, while $emit will bubble the event and pass it to the parent controller. $on is the event registration of angularjs. Functions, with these we can quickly solve the communication between angularjs controllers in the angularjs way. The code is as follows:

View:

<div ng-app="app" ng-controller="parentCtr">
  <div ng-controller="childCtr1">name :
    <input ng-model="name" type="text" ng-change="change(name);" />
  </div>
  <div ng-controller="childCtr2">Ctr1 name:
    <input ng-model="ctr1Name" />
  </div>
</div>

Controller:

angular.module("app", []).controller("parentCtr",
function ($scope) {
  $scope.$on("Ctr1NameChange",
  function (event, msg) {
    console.log("parent", msg);
    $scope.$broadcast("Ctr1NameChangeFromParrent", msg);
  });
}).controller("childCtr1", function ($scope) {
  $scope.change = function (name) {
    console.log("childCtr1", name);
    $scope.$emit("Ctr1NameChange", name);
  };
}).controller("childCtr2", function ($scope) {
  $scope.$on("Ctr1NameChangeFromParrent",
  function (event, msg) {
    console.log("childCtr2", msg);
    $scope.ctr1Name = msg;
  });
});

here childCtr1 The name change will be bubbled to the parent controller, and the parent controller will wrap the event and broadcast it to all child controllers, while childCtr2 registers the change event and changes itself. Note that the parent controller must change the event name when broadcasting.

jsfiddle link: http://jsfiddle.net/whitewolf/5JBA7/15/

I hope this article will be helpful to everyone in AngularJS programming.