Home > Web Front-end > JS Tutorial > body text

Example analysis of communication mechanism between Controllers in Angularjs

高洛峰
Release: 2016-12-07 14:29:12
Original
1024 people have browsed it

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>
Copy after login

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;
  });
});
Copy after login

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.


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!