當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
AngularJS实战之Controller之间的通信
生活随笔
收集整理的這篇文章主要介紹了
AngularJS实战之Controller之间的通信
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
我們時(shí)常會(huì)在不同controller之間進(jìn)行通信，接下來(lái)就介紹三種controller之間的通信方式
一、使用$on、$emit和$broadcast進(jìn)行controller通信
雖然AngularJS是不推薦使用嵌套controller的使用，但是會(huì)有場(chǎng)景使用到父子controller傳值的情況
$on、$emit和$broadcast使得event、data在controller之間的傳遞變的簡(jiǎn)單。
$emit：子傳父? 傳遞event與data
$broadcast：父?jìng)髯?child controller傳遞event與data
$on：監(jiān)聽(tīng)或接收數(shù)據(jù)。。用于接收event與data
例子：
<body><div ng-controller="parentController"><div ng-click="parent_onclick()" style="background-color: green;">我是父親{{parent}}</div><div ng-controller="childController"><div ng-click="child_onclick()" style="background-color: red;">我是子集{{child}}</div></div></div> </body> <script type="text/javascript" src="../plugins/angular/angular.js"></script> <script type="text/javascript">var lxApp = angular.module("lxApp", []);lxApp.controller("parentController", function($scope) {$scope.$on("sendParent", function(event, data) {$scope.parent = data;});$scope.parent_onclick = function() {$scope.$broadcast('sendChild', '我給子控制器傳遞數(shù)據(jù)');};}).controller("childController", function($scope) {$scope.$on("sendChild", function(event, data) {$scope.child = data;});$scope.child_onclick = function() {$scope.$emit('sendParent', '我給父級(jí)傳遞數(shù)據(jù)');};}); </script>
你會(huì)發(fā)現(xiàn)點(diǎn)擊父級(jí)的div會(huì)使用$scope.$broadcast傳遞'sendChild'到子集，子集也會(huì)使用$on來(lái)監(jiān)聽(tīng)父級(jí)傳遞的值。熟悉一下即可使用這種傳值方式。
二、使用SERVICES（服務(wù)）來(lái)實(shí)現(xiàn)值的傳遞
我們首先來(lái)創(chuàng)建一個(gè)module（模塊）
var lxApp = angular.module("lxApp", []);
接下來(lái)創(chuàng)建一個(gè)新的服務(wù)，服務(wù)里面定義一個(gè)魚(yú)的數(shù)組，然后在使用addFish 方法添加魚(yú)
lxApp.service('lxAppService', function($rootScope) {var service = {fishs : [ {title : "鯊魚(yú)",area : "sea"}, {title : "鯨魚(yú)",area : "sea"} ],addFish : function(fish) {service.fishs .push(fish);}};return service;});
接下來(lái)是controller和html的創(chuàng)建
<div ng-controller="parentController"><div ng-click="parent_onclick()" style="background-color: green;">我要向大海添加魚(yú)</div><div ng-controller="childController"><div ng-click="child_onclick()" style="background-color: red;">我要獲得魚(yú)</div></div></div>
lxApp.controller("parentController", function($scope,lxAppService) {$scope.parent_onclick = function() {lxAppService.addFish({title : "海豚",area : "sea"} );alert(lxAppService.fishs);};}).controller("childController", function($scope,lxAppService) {$scope.child_onclick = function() {alert(angular.toJson(lxAppService.fishs));};});
展示點(diǎn)擊父級(jí)的div調(diào)用父作用域的方法添加魚(yú)，點(diǎn)擊子集調(diào)用子集作用域的方法獲得魚(yú)
三、使用作用域進(jìn)行controller的通信
div：
<div ng-controller="parentController"><div style="background-color: green;">我是父級(jí)</div><div ng-controller="childController"><div ng-click="child_onclick()" style="background-color: red;">我是獲得父級(jí)的名字</div></div></div>
controller：
lxApp.controller("parentController", function($scope) {$scope.name="1212";}).controller("childController", function($scope,$rootScope) {$scope.child_onclick = function() {alert($scope.name);};});
效果
這里我們會(huì)看到在父級(jí)定義的name在子集里面也可以獲取到，這是AngularJS作用域機(jī)制，當(dāng)我們調(diào)用子集的方法打印$scope.name,這時(shí)候會(huì)一直往父級(jí)向上的作用域中到$rootScope找name，所以這時(shí)候會(huì)打印出name。
最后就是可以使用根作用域$rootScope來(lái)獲取不同controller的值。
AngularJS監(jiān)聽(tīng)數(shù)組變化
AngularJS的$location基本用法和注意事項(xiàng)
AngularJS 無(wú)限滾動(dòng)加載數(shù)據(jù)控件 ngInfiniteScroll
AngularJS實(shí)戰(zhàn)之ng-repeat的詳細(xì)用法
ng-show和ng-if的區(qū)別和使用場(chǎng)景
AngularJS實(shí)戰(zhàn)之路由ui-view傳參
AngularJS實(shí)戰(zhàn)之filter的使用二
AngularJS實(shí)戰(zhàn)之filter的使用一
AngularJS實(shí)戰(zhàn)之路由ui-view
一、使用$on、$emit和$broadcast進(jìn)行controller通信
雖然AngularJS是不推薦使用嵌套controller的使用，但是會(huì)有場(chǎng)景使用到父子controller傳值的情況
$on、$emit和$broadcast使得event、data在controller之間的傳遞變的簡(jiǎn)單。
$emit：子傳父? 傳遞event與data
$broadcast：父?jìng)髯?child controller傳遞event與data
$on：監(jiān)聽(tīng)或接收數(shù)據(jù)。。用于接收event與data
例子：
<body><div ng-controller="parentController"><div ng-click="parent_onclick()" style="background-color: green;">我是父親{{parent}}</div><div ng-controller="childController"><div ng-click="child_onclick()" style="background-color: red;">我是子集{{child}}</div></div></div> </body> <script type="text/javascript" src="../plugins/angular/angular.js"></script> <script type="text/javascript">var lxApp = angular.module("lxApp", []);lxApp.controller("parentController", function($scope) {$scope.$on("sendParent", function(event, data) {$scope.parent = data;});$scope.parent_onclick = function() {$scope.$broadcast('sendChild', '我給子控制器傳遞數(shù)據(jù)');};}).controller("childController", function($scope) {$scope.$on("sendChild", function(event, data) {$scope.child = data;});$scope.child_onclick = function() {$scope.$emit('sendParent', '我給父級(jí)傳遞數(shù)據(jù)');};}); </script>
你會(huì)發(fā)現(xiàn)點(diǎn)擊父級(jí)的div會(huì)使用$scope.$broadcast傳遞'sendChild'到子集，子集也會(huì)使用$on來(lái)監(jiān)聽(tīng)父級(jí)傳遞的值。熟悉一下即可使用這種傳值方式。
二、使用SERVICES（服務(wù)）來(lái)實(shí)現(xiàn)值的傳遞
我們首先來(lái)創(chuàng)建一個(gè)module（模塊）
var lxApp = angular.module("lxApp", []);
接下來(lái)創(chuàng)建一個(gè)新的服務(wù)，服務(wù)里面定義一個(gè)魚(yú)的數(shù)組，然后在使用addFish 方法添加魚(yú)
lxApp.service('lxAppService', function($rootScope) {var service = {fishs : [ {title : "鯊魚(yú)",area : "sea"}, {title : "鯨魚(yú)",area : "sea"} ],addFish : function(fish) {service.fishs .push(fish);}};return service;});
接下來(lái)是controller和html的創(chuàng)建
<div ng-controller="parentController"><div ng-click="parent_onclick()" style="background-color: green;">我要向大海添加魚(yú)</div><div ng-controller="childController"><div ng-click="child_onclick()" style="background-color: red;">我要獲得魚(yú)</div></div></div>
lxApp.controller("parentController", function($scope,lxAppService) {$scope.parent_onclick = function() {lxAppService.addFish({title : "海豚",area : "sea"} );alert(lxAppService.fishs);};}).controller("childController", function($scope,lxAppService) {$scope.child_onclick = function() {alert(angular.toJson(lxAppService.fishs));};});
展示點(diǎn)擊父級(jí)的div調(diào)用父作用域的方法添加魚(yú)，點(diǎn)擊子集調(diào)用子集作用域的方法獲得魚(yú)
三、使用作用域進(jìn)行controller的通信
div：
<div ng-controller="parentController"><div style="background-color: green;">我是父級(jí)</div><div ng-controller="childController"><div ng-click="child_onclick()" style="background-color: red;">我是獲得父級(jí)的名字</div></div></div>
controller：
lxApp.controller("parentController", function($scope) {$scope.name="1212";}).controller("childController", function($scope,$rootScope) {$scope.child_onclick = function() {alert($scope.name);};});
效果
這里我們會(huì)看到在父級(jí)定義的name在子集里面也可以獲取到，這是AngularJS作用域機(jī)制，當(dāng)我們調(diào)用子集的方法打印$scope.name,這時(shí)候會(huì)一直往父級(jí)向上的作用域中到$rootScope找name，所以這時(shí)候會(huì)打印出name。
最后就是可以使用根作用域$rootScope來(lái)獲取不同controller的值。
AngularJS監(jiān)聽(tīng)數(shù)組變化
AngularJS的$location基本用法和注意事項(xiàng)
AngularJS 無(wú)限滾動(dòng)加載數(shù)據(jù)控件 ngInfiniteScroll
AngularJS實(shí)戰(zhàn)之ng-repeat的詳細(xì)用法
ng-show和ng-if的區(qū)別和使用場(chǎng)景
AngularJS實(shí)戰(zhàn)之路由ui-view傳參
AngularJS實(shí)戰(zhàn)之filter的使用二
AngularJS實(shí)戰(zhàn)之filter的使用一
AngularJS實(shí)戰(zhàn)之路由ui-view
轉(zhuǎn)載于:https://www.cnblogs.com/baryon/p/9611421.html
總結(jié)
以上是生活随笔為你收集整理的AngularJS实战之Controller之间的通信的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 268. 缺失数字
- 下一篇： JS基础_使用工厂方法创建对象（了解下就