AngularJS控制器controller之间如何通信

angular控制器通信的方式有三种:

1,利用作用域继承的方式。即子控制器继承父控制器中的内容

2,基于事件的方式。即$on,$emit,$boardcast这三种方式

3,服务方式。写一个服务的单例然后通过注入来使用

利用作用域的继承方式

由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会影响到子作用域,反之,修改子作用域只会影响子作用域的值,不会影响父作用域上面的值;如果需要父作用域与子作用域共享一个值的话,就需要用到后面一种,即作用域上的值为对象,任何一方的修改都能影响另一方,这是因为在js中对象都是引用类型。

基本类型

function Sandcrawler($scope) {

$scope.location = "Mos Eisley North";

$scope.move = function(newLocation) {

$scope.location = newLocation;

}

};

function Droid($scope) {

$scope.sell = function(newLocation) {

$scope.location = newLocation;

}

}

// html

<div ng-controller="Sandcrawler">

<p>Location: </p>

<button ng-click="move('Mos Eisley South')">Move</button>

<div ng-controller="Droid">

<p>Location: </p>

<button ng-click="sell('Owen Farm')">Sell</button>

</div>

基于事件的方式

在一般情况下基于继承的方式已经足够满足大部分情况了,但是这种方式没有实现兄弟控制器之间的通信方式,所以引出了事件的方式。基于事件的方式中我们可以利用$on,$emit,$boardcast这几个方式来实现,其中$on表示事件监听,$emit表示向父级以上的作用域触发事件, $boardcast表示向子级以下的作用域广播事件。

angular服务的方式

在ng中服务是一个单例,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。

var app = angular.module('myApp', []);

//使用factory API创建服务instance

app.factory('instance', function(){

return {};

});

app.controller('MainCtrl', function($scope, instance) {

$scope.change = function() {

instance.name = $scope.test;

};

});

app.controller('sideCtrl', function($scope, instance) {

$scope.add = function() {

$scope.name = instance.name;

};

});

//html

<div ng-controller="MainCtrl">

<input type="text" ng-model="test" />

<div ng-click="change()">click me</div>

AngularJS进阶(九)控制器controller之间如何通信的更多相关文章

  1. angularJS中directive与controller之间的通信

    当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...

  2. AngularJS实战之Controller之间的通信

    我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式 一.使用$on.$emit和$broadcast进行controller通信 虽然AngularJ ...

  3. angularJS中directive与directive 之间的通信

    上一篇讲了directive与controller之间的通信:但是我们directive与directive之间的通信呢? 当我们两个directive嵌套使用的时候怎么保证子directive不会被 ...

  4. AngularJS 中 Controller 之间的通信

    用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...

  5. Angularjs controller之间的通信

    刚刚看了网上的一些关于控制器之间的通信:然后结合自己项目做了一些,这里主要做的是二个同级之间的controller通信. Html: <html> <script src=" ...

  6. angularjs探秘<三> 控制器controller及angular项目结构

    先来看一个例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...

  7. angularJS的controller之间如何正确的通信

    AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJ ...

  8. angularjs中控制器之间的通信----$on、$emit和$broadcast解析

    $on.$emit和$broadcast使得event.data在controller之间的传递变的简单. $emit只能向parent controller传递event与data $broadca ...

  9. angular开发控制器之间的通信

    一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法 ...

随机推荐

  1. GIF动态图制作

    GIF动态图制作 博客写了也有一阵了,一直好奇大牛的博客里demo的动态图是怎么做的,今天抽空研究了一下,找了一个软件,以后再发现有好的工具再继续推荐 GIF制作工具--LICEcap 效果要比下面的 ...

  2. Java安全套接字扩展——JSSE

    上节已经介绍了SSL/TLS协议的通信模式,而对于这些底层协议,如果要每个开发者都自己去实现显然会带来不必要的麻烦,正是为了解决这个问题Java为广大开发者提供了Java安全套接字扩展--JSSE,它 ...

  3. 适配器模式(adapter)

    适配器模式的定义: 将一个类的接口转换成客户希望的另外一个接口,适配器模式使得原本由于接口不兼容而不能在一起的那些类可以一起工作. 主要分为三类:类的适配器模式.对象的适配器模式.接口的适配器模式. ...

  4. 一个maven项目打多个可执行Jar文件

    使用maven-jar-plugin插件可以将一个maven项目按照需求打出多个可执行的jar文件. pom关键配置如下所示: <plugin> <groupId>org.ap ...

  5. 17 一个ContentProvider的例子

    服务端(ContentProvider) 目录结构图: MainActivity.java: package com.qf.day17_contentprovider_words_demo2; imp ...

  6. 1079. Total Sales of Supply Chain (25) -记录层的BFS改进

    题目如下: A supply chain is a network of retailers(零售商), distributors(经销商), and suppliers(供应商)-- everyon ...

  7. iOS中 自定义cell分割线/分割线偏移 韩俊强的博客

    在项目开发中我们会常常遇到tableView 的cell分割线显示不全,左边会空出一截像素,更有甚者想改变系统的分割线,并且只要上下分割线的一个等等需求,今天重点解决以上需求,仅供参考: 每日更新关注 ...

  8. Android初级教程XUtils实现“断点续传”下载

    对于"断电续传",在任何开发中都显得很重要.xutils对此封装的很好了,可以很简单的实现很多下载功能,其中就包括"断点续传" 主要代码如下: package ...

  9. TCP/IP 协议简单分析

    首先TCP和IP是两种不同的协议,它们来七层网络模型中分别在不同的层次,IP协议是网络层的协议,TCP是更高一层的传输层的协议,TCP是建立在IP协议之上的,所以一般把TCP和IP连在一起说TCP/I ...

  10. 【一天一道LeetCode】#202. Happy Number

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Write a ...