AngularJS implementation of communication mode instance summary

This example describes the communication mode between the AngularJS implementation controller. Share to everyone for reference, as follows:

In the AngularJS development project, the communication between the controller, such as the passage of the parameters, the passage of data is more common. Communication between the controller is particularly important. Common ways have the following two types: 1. Angular service; second, based on event broadcasting; in addition, there is a mode inheritance based on scope. Let’s talk about the first two ways:

Based on Angular Service:

Service is a single case in Angular, so it generates one in the service Objects, this object can be shared in all controllers using dependency injection. Referring to the following example, the value of the service object is modified in one controller, and the modified value is obtained in another controller:

 var APP = angular.module 'myApp', []); app.factory ('myservice "(' myservice" () {return {};}; // definition service app.controller ('ctrltest1', function ($ scope, 'myservice') {$ Scope.change = function () {myService.name = $ scope.test; // In the first controller assigns a value};}); app.controller ('ctrltst2', function ($ scope, 'MyService) ') {$ scope.add = function () {$ scope.name = myService.Name; // Transfer the value of the first controller to the second controller};});   
Click Me
  
My Name {{Name}}
Second, based on event broadcasting
Based on event broadcast,
$ EMIT ()

, $ Broadcaset and

$ EMIT ()

These three methods. 1. Send a custom event to the parent’s role hierarchy: Use $ EMIT () Method, Scope. $ EMIT (Name, [Args, ...])

Note: Name is an event name, and Args is 0 or more parameters. Application scenario: is used to pass parameters to the controller of the sub-page controller to the parent page.

2. To the sub-role hierarchy broadcast custom event:

Apply Scenario: Communicate parameters or same as the parent page controller to the sub-page Transfer parameters between the level controller.

Using

$ Broadcaset () Method, $ Scope. $ Broadcaset (Name, [Args, …])

Note: Name is an event name, ARGS is 0 or more parameters.

3. Using the listener to handle custom events

In order to process events that are issued or broadcast, Use the $ ON () . $ ON ()

The following syntax will be used:

$ SCOPE. $ On (name, listener)

Note: Name is the name of the event that will be listened, the Listener parameter is a function, which will accept the event as the first parameter, accept $ EMIT () or $ Broadcaset ()

method All other parameters passed as subsequent parameters.

$ ON () Method is mainly used to monitor changes in events in $ EMIT ()

and

$ Broadcaset () , for example, if there are two methods Variables change, the $ on () method will get the change in the variable. Referring to the following example, the value of the variable is modified in one controller, and the modified value is listened to the other controller, and responds according to the modified value. app.controller ( 'versiontaskCtrl', function WriteTestcaseCtrl ($ scope, $ cookies, $ rootScope, $ modal, $ stateParams, ui, searchVariable, currentuserversions,) {$ scope.taskId = $ cookies [ 'edit_taskId']; $ scope.versionid = parseInt ($ cookies [ 'edit_versionId']); $ scope.versionName = $ cookies [ 'edit_versionName']; $ scope.version = $ scope.versionid GetUserversions = function () {currentUserversions.get (Function (RES) {$ scope.versions = res;});}; reload = function () {GetUserversions ();}; $ scope.changeversionid = function (v) {console.log (v); $ scope. $ Broadcast ('versionidchange', $ scope.versionID); / / broadcast $ Scope.VersionID to other controller Value changes. }; repel ();}); The second controller listens to the broadcast event in the first controller:

app.controller ( ‘SchemeTaskEditableRowCtrl’, function ($ scope, $ rootScope, $ cookies, $ filter, $ http, $ window, $ stateParams, basetasksService, schemetasksService, UserService) {$ scope.taskId = $ cookies [ ‘edit_taskId’]; $ scope.versionid = $ cookies [ ‘edit_versionId’]; $ scope.version = $ scope.versionid; var userid = $ rootScope.user.userid; $ scope.schemetask = []; $ scope .bleask = []; $ scope.result = []; $ scope. $ ON (‘VersionidChange’, Function (Event, VersionID) {$ scope.versionid = VersionID; // Monitor changes to the $ scope.versionID value. Then call$ scope.schemetask () and $ scope.getusers () $ scope.schemetask (); $ scope.getusers ();}; $ scope.schemetask = function () {$ scope.tasks = [] ; $ scope.schemetask = []; schemetasksService.get ({version: $ scope.versionid}, function (res) {$ scope.schemetask_collection = res.results; //console.log($scope.schemetask_collection); $ scope .schemetask_displayed = [] .concat ($ scope.schemetask_collection); var i = 1; angular.forEach ($ scope.schemetask_collection, function (item) {item [ ‘director’] = “app.writetestitem” + “({taskid : “+ Item.id +”} “; item [‘Number’] = i; i ++; $ scope.schemetask.push (item);}); $ scope.tasks = $ scope.schemetask;});} ; $ scope.getusers = function () {userService.get (Function (RES) {$ scope.users = res.results; $ scope.USERSSPLAYED = [] .concat ($ scope.users); $ scope.ITEMARRAY = []; $ scope.USERARRAY = []; $ scope.names = []; angular.ForeAach ($ scope.users, function ) {$ scope.itemarray.push (item); $ scope.userarray.push (item.name + item.number); var itemname = {‘Name’: item.name, ‘number’: item.number}; Scope.names.push (itemname);}; $ scope.selected = $ scope.users;});};};
   About AngularJS controller The inter-communication method is always concluded, you are welcome to criticize the exchange! 
More about AngularJS Related Contents Readers can view this site: “AngularJS Directive Skill Summary”, “AngularJS Getting Started and Advanced Tutorial” and “AngularJS MVC Architecture Summary”

I hope this article will help you AngularJS programming.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment