Angular: $ broadcast, $ emit, $ on, And angularemit

Angular: $ broadcast, $ emit, $ on, And angularemit

File level

 

Index.html

<! DOCTYPE html> Templates-home.html

<H2> home Templates-main.html

<H2> main Js-route. js

Var nickApp = angular. module ('nickapp', ['ui. router ']). config (['$ stateProvider', '$ urlRouterProvider', function ($ stateProvider, $ urlRouterProvider) {$ urlRouterProvider. otherwise ('/home'); $ stateProvider. state ('home', {url: '/home', templateUrl: 'templates/home.html', controller: 'homectl ', // params: {paramsData: null} navButtons: [] // customize some parameters through $ state in controll. get ('home') get object }). state ('main', {url: '/main', templateUrl: 'templates/main.html', controller: 'mainctl ', params: {paramsData: null} // The target page defines the received parameter prameData})}])View Code

Js-app. js

NickApp. controller ('bodyctl ', [' $ State', '$ scope', function ($ state, $ scope) {$ scope. goMain = function () {$ state. go ('main', {paramsData: 'body go main'}); // when passing the parameter, the parameters are consistent. prameData -- route configuration on the target page: params: {paramsData: null }}; $ scope. goHome = function () {$ state. go ('home', {paramsData: 'home page'}); // If params is not configured for the route on the target page, $ stateParams is Blank}; $ scope. data = 'body data'; console. log ($ scope. data); console. log ($ scope. homeData); // The parent cannot use the sub-scope homeData usage method to transmit the value to receive $ on $ emit $ broadcast}]). controller ('homectl ', [' $ scope ',' $ stateParams ', function ($ scope, $ state, $ stateParams) {$ scope. goMain = function () {$ state. go ('main', {param: 'home go main'}); // inconsistent $ stateParams defines the received parameter {paramsData: null} for the target page if it fails to receive the parameter }}; console. log ($ stateParams); console. log ($ scope. data); // use the parent scope data $ scope. homeData = 'home data'; console. log ($ scope. homeData); console. log ($ state. get ('home'); console. log ($ state. get ('main');}]). controller ('mainctl ', [' $ scope ',' $ stateParams ', function ($ scope, $ stateParams) {console. log ($ stateParams); console. log ($ scope. data); // sub-use parent scope data}]) // $ emit sub-send event and data to parent controller -- $ broadcast parent upload sub--- $ on receive. controller ('selfctrl ', [' $ scope ', 'publicdataservice', function ($ scope, PublicDataService) {$ scope. click = function () {$ scope. $ broadcast ('to-child ', 'to-child data'); // upload a child to the parent database $ scope. $ emit ('to-parent', 'to-parent data'); // sub-parent}; $ scope. publicData = PublicDataService. publicData; console. log ($ scope. publicData) ;}]). controller ('parentctrl ', [' $ scope ', 'publicdataservice', function ($ scope, PublicDataService) {$ scope. $ on ('to-parent', function (event, data) {console. log ('parentctrl -- '+ data); // The parent controller can get the parent value}); $ scope. $ on ('to-child ', function (event, data) {console. log ('parentctrl -- '+ data); // The parent controller cannot be passed to the sublevel value}); $ scope. publicData = PublicDataService. publicData; console. log ($ scope. publicData) ;}]). controller ('childctrl ', [' $ scope ', 'publicdataservice', function ($ scope, PublicDataService) {$ scope. $ on ('to-child ', function (event, data) {console. log ('childctrl -- '+ data); // The Sub-controller can be passed to the sub-level value}); $ scope. $ on ('to-parent', function (event, data) {console. log ('childctrl -- '+ data); // The Sub-controller cannot be passed to the parent level.}); $ scope. publicData = PublicDataService. publicData; console. log ($ scope. publicData);}])/* solution for unobtaining values at the same level * use the above $ state. go () * or define a public service PublicDataService and inject it into the controller * or customize some parameters in controll -- HomeCtl through $ state. get ('home') to get an object that contains the Routing Parameters configured on the home page */. controller ('broctrl ', [' $ scope ', 'publicdataservice', function ($ scope, PublicDataService) {$ scope. $ on ('to-parent', function (event, data) {console. log ('broctrl ', data); // The value cannot be obtained at the level}); $ scope. $ on ('to-child ', function (event, data) {console. log ('broctrl ', data); // The value cannot be obtained at the level}); $ scope. publicData = PublicDataService. publicData; console. log ($ scope. publicData);}])View Code

Js-service-PublicDataService. js

NickApp. factory ('publicdataservice ', [function () {var publicData = 'public service data'; return {publicData: publicData}])View Code