林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankaka

摘要：本文主讲了AngularJs中的Controller中数据共享、继承、通信的具体使用

本教程使用AngularJs版本号：1.5.3

AngularJs GitHub: https://github.com/angular/angular.js/

AngularJs下载地址：https://angularjs.org/

一、controller基础与使用方法

AngularJS中的controller中文名就是控制器。它是一个Javascript函数（类型/类）。用来向视图的作用域（$scope）加入额外的功能。而且每一个controller都有自己的scope， 同一时候也能够共享他们父controller的scope内的数据。

其能实现的功能例如以下：

（1）给作用域对象设置初始状态

你能够通过创建一个模型属性来设置初始作用域的初始状态。 比方:

  1. var app = angular.module('myApp', []);
  2. app.controller('myController', function($scope) {
  3.     $scope.inputValue = "林炳文Evankaka";
  4. });

上面我们设置了一个inputValue，假设要在html页面中使用。就能够直接用{{inputValue}},例如以下： 

  1. <h1>您输入的内容为：{{inputValue}}</h1>

当然，你也能够将此数据双向绑定到一个input、select等，例如以下： 

  1. <input  type="text" ng-model = "inputValue">

（2）给作用域对象添加行为

AngularJS作用域对象的行为是由作用域的方法来表示的。这些方法是能够在模板或者说视图中调用的。这些方法和应用模型交互，而且能改变模型。
如我们在模型那一章所说的，不论什么对象（或者原生的类型）被赋给作用域后就会变成模型。不论什么赋给作用域的方法，都能在模板或者说视图中被调用，而且能通过表达式或者ng事件指令调用。例如以下：

  1. var app = angular.module('myApp', []);
  2. app.controller('myController', function($scope) {
  3.     $scope.myClick = function(){
  4.     	alert("click");
  5.     }
  6. });

然后页面上使用： 

  1. <button ng-click= "myClick()" ></button>

这样就给button加入了一个点击事件

二、controller继承

这里说的继承一般说的是scope数据，这是由于子控制器的作用域将会原型继承父控制器的作用域。

因此当你须要重用来自父控制器中的功能时，你所要做的就是在父作用域中加入对应的方法。这样一来，自控制器将会通过它的作用域的原型来获取父作用域中的全部方法。

例如以下实例：

  1. <!DOCTYPE html>
  2. <html lang="zh" ng-app="myApp">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AngularJS入门学习</title>
  6. 	<script type="text/javascript"  src="./1.5.3/angular.min.js"></script>
  7. </head>
  8. <body>
  9.     <div ng-controller = "parentCtrl">
  10. 	    <p><input  type="text" ng-model = "value1">请输入内容</p>
  11. 	    <h1>您输入的内容为：{{value1}}</h1>
  12. 	      <div ng-controller = "childCtrl">
  13. 		    <button ng-click = "gerParentValue()"></button>
  14. 	      </div>
  15. 	</div>
  16.  
  17. </body>
  18. <script type="text/javascript">
  19. var app = angular.module('myApp', []);//获得整个angularJS影响的html元素
  20. app.controller('parentCtrl',function($scope){
  21.     $scope.value2 = "我是林炳文";
  22. });  
  23.  
  24. app.controller('childCtrl',function($scope){
  25.     $scope.gerParentValue = function() {
  26.     	alert($scope.value1 + $scope.value2);
  27.     }
  28. });
  29. </script>
  30. </html>

这里须要注意的是childCtrl所在的DIV一定要放在parentCtrl所在的DIV里才会生效！

而且假设你须要从父控制器中调用子控制器的方法，那么使用上面的代码会错误发生。

三、controller之间共享数据

(1)在父级controller中定义scope,子级共用

  1. <!DOCTYPE html>
  2. <html lang="zh" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>AngularJS入门学习</title>
  6.     <script type="text/javascript" src="./1.5.3/angular.min.js"></script>
  7. </head>
  8. <body>
  9.    <div  ng-controller="paretnCtrl">
  10.      <input type="text" ng-model="name" />
  11.      <div ng-controller="childCtrl1">
  12.         {{name}}
  13.         <button ng-click="setName()">set name to jack jack jack</button>
  14.      </div>
  15.      <div ng-controller="childCtrl2">
  16.         {{name}}
  17.         <button ng-click="setName()">set name to tom tom tom</button>
  18.      </div>
  19.    </div>
  20. </body>
  21. <script type="text/javascript">
  22. var app = angular.module('myApp', []);
  23. app.controller('paretnCtrl', function($scope,$timeout) {
  24.     $scope.name = "林炳文Evankaka";
  25. });
  26. app.controller('childCtrl1', function($scope,$timeout) {
  27.     $scope.setName = function() {
  28.          $scope.name = "set name to jack jack jack";
  29.     };
  30. });
  31. app.controller('childCtrl2', function($scope,$timeout) {
  32.     $scope.setName = function() {
  33.     	$scope.name = "set name to tom tom tom";
  34.     };
  35. });
  36. </script>
  37. </html>

（2）将数据全局共享

angularjs自身有二种，设置全局变量的方法，在加上js的设置全局变量的方法，总共同拥有三种。

要实现的功能是，在ng-app中定义的全局变量，在不同的ng-controller里都能够使用。
通过var 直接定义global variable。这根纯js是一样的。
用angularjs value来设置全局变量 。
用angularjs constant来设置全局变量 。

以下是使用value的方式

  1. <!DOCTYPE html>
  2. <html lang="zh" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>AngularJS入门学习</title>
  6.     <script type="text/javascript" src="./1.5.3/angular.min.js"></script>
  7. </head>
  8. <body>
  9.      <div ng-controller="childCtrl1">
  10.         {{name}}
  11.         <button ng-click="setName()">set name to jack jack jack</button>
  12.      </div>
  13.      <div ng-controller="childCtrl2">
  14.         {{name}}
  15.         <button ng-click="setName()">set name to tom tom tom</button>
  16.      </div>
  17. </body>
  18. <script type="text/javascript">
  19. var app = angular.module('myApp', []);
  20. app.value('data',{'name':'我是林炳文'});
  21. app.controller('childCtrl1', function($scope,data) {
  22. 	$scope.name = data.name;
  23.     $scope.setName = function() {
  24.          $scope.name = "set name to jack jack jack";
  25.     };
  26. });
  27. app.controller('childCtrl2', function($scope,data) {
  28. 	   $scope.name = data.name;
  29.        $scope.setName = function() {
  30.     	$scope.name = "set name to tom tom tom";
  31.     };
  32. });
  33. </script>
  34. </html>

（3）service依赖注入

angularjs最突出的特殊之中的一个就是DI。 也就是注入。 利用service把须要共享的数据注入给须要的controller。

这是最好的方法

  1. <!DOCTYPE html>
  2. <html lang="zh" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>AngularJS入门学习</title>
  6.     <script type="text/javascript" src="./1.5.3/angular.min.js"></script>
  7. </head>
  8. <body>
  9.      <div ng-controller="childCtrl1">
  10.         {{name}}
  11.         <button ng-click="setName()">set name to jack jack jack</button>
  12.      </div>
  13.      <div ng-controller="childCtrl2">
  14.         {{name}}
  15.         <button ng-click="setName()">set name to tom tom tom</button>
  16.      </div>
  17. </body>
  18. <script type="text/javascript">
  19. var app = angular.module('myApp', []);
  20. app.factory('dataService', function() {
  21.   var service = {
  22.      name:'我是林炳文'
  23.    };
  24.    return service;
  25. });
  26. app.controller('childCtrl1', function($scope,dataService) {
  27. 	$scope.name = dataService.name;
  28.     $scope.setName = function() {
  29.          $scope.name = "set name to jack jack jack";
  30.     };
  31. });
  32. app.controller('childCtrl2', function($scope,dataService) {
  33. 	   $scope.name = dataService.name;
  34.        $scope.setName = function() {
  35.     	$scope.name = "set name to tom tom tom";
  36.     };
  37. });
  38. </script>
  39. </html>

四、controller之间通信

在普通情况下基于继承的方式已经足够满足大部分情况了，可是这样的方式没有实现兄弟控制器之间的通信方式，所以引出了事件的方式。

基于事件的方式中我们能够里面作用的$on,$emit,$boardcast这几个方式来实现，当中$on表示事件监听。$emit表示向父级以上的
作用域触发事件。 $boardcast表示向子级以下的作用域广播事件。

$emit仅仅能向parent controller传递event与data
$broadcast仅仅能向child controller传递event与data
$on用于接收event与data

实例一：

  1. <!DOCTYPE html>
  2. <html lang="zh" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>AngularJS入门学习</title>
  6.     <script type="text/javascript" src="./1.5.3/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-app="app" ng-controller="parentCtr">
  10.      <div ng-controller="childCtr1">childCtr1 name :
  11.          <input ng-model="name" type="text" ng-change="change(name)" />
  12.     </div>
  13.      <div ng-controller="childCtr2">from childCtr1 name:
  14.          <input ng-model="ctr1Name" />
  15.      </div>
  16. </div>
  17. </body>
  18. <script type="text/javascript">
  19. var app = angular.module('myApp', []);
  20. app.controller("parentCtr",function ($scope) {
  21.     $scope.$on("Ctr1NameChange",function (event, msg) {//接收到来自子childCtr1的信息后再广播给全部子controller
  22.         console.log("parent", msg);
  23.         $scope.$broadcast("Ctr1NameChangeFromParrent", msg);//给全部子controller广播
  24.     });
  25. });
  26. app.controller("childCtr1", function ($scope) {
  27.     $scope.change = function (name) {
  28.         console.log("childCtr1", name);
  29.         $scope.$emit("Ctr1NameChange", name);//将信息传递给父controller
  30.     };
  31. }).controller("childCtr2", function ($scope) {
  32.     $scope.$on("Ctr1NameChangeFromParrent",function (event, msg) { //监听来自父controller的信息
  33.         console.log("childCtr2", msg);
  34.         $scope.ctr1Name = msg;
  35.     });
  36. });
  37. </script>
  38. </html>

实例二：

  1. <!DOCTYPE html>
  2. <html lang="zh" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>AngularJS入门学习</title>
  6.     <script type="text/javascript" src="./1.5.3/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-controller="ParentCtrl">                <!--父级-->
  10.     <div ng-controller="SelfCtrl">              <!--自己-->
  11.          <button ng-click="click()">click me</button>
  12.         <div ng-controller="ChildCtrl">
  13.  
  14.         </div>   <!--子级-->
  15.     </div>
  16.     <div ng-controller="BroCtrl">
  17.  
  18.     </div>         <!--平级-->
  19. </div>
  20. </body>
  21. <script type="text/javascript">
  22. var app = angular.module('myApp', []);
  23. app.controller('SelfCtrl', function($scope) {
  24.   $scope.click = function () {
  25.     $scope.$broadcast('to-child', 'child');
  26.     $scope.$emit('to-parent', 'parent');
  27.   }
  28. });
  29.  
  30. app.controller('ParentCtrl', function($scope) {
  31.   $scope.$on('to-parent', function(event,data) {
  32.     console.log('ParentCtrl', data);	   //父级能得到值
  33.   });
  34.   $scope.$on('to-child', function(event,data) {
  35.     console.log('ParentCtrl', data);	   //子级得不到值
  36.   });
  37. });
  38.  
  39. app.controller('ChildCtrl', function($scope){
  40.   $scope.$on('to-child', function(event,data) {
  41.     console.log('ChildCtrl', data);		 //子级能得到值
  42.   });
  43.   $scope.$on('to-parent', function(event,data) {
  44.     console.log('ChildCtrl', data);		 //父级得不到值
  45.   });
  46. });
  47.  
  48. app.controller('BroCtrl', function($scope){
  49.   $scope.$on('to-parent', function(event,data) {
  50.     console.log('BroCtrl', data);		  //平级得不到值
  51.   });
  52.   $scope.$on('to-child', function(event,data) {
  53.     console.log('BroCtrl', data);		  //平级得不到值
  54.   });
  55. });
  56. </script>
  57. </html>

输出结果：

$emit和$broadcast能够传多个參数。$on也能够接收多个參数。

在$on的方法中的event事件參数，其对象的属性和方法例如以下

事件属性 目的
event.targetScope 发出或者传播原始事件的作用域
event.currentScope 眼下正在处理的事件的作用域
event.name 事件名称
event.stopPropagation() 一个防止事件进一步传播(冒泡/捕获)的函数(这仅仅适用于使用`$emit`发出的事件)
event.preventDefault() 这种方法实际上不会做什么事。可是会设置`defaultPrevented`为true。

直到事件监听器的实现者採取行动之前它才会检查`defaultPrevented`的值。
event.defaultPrevented 假设调用

五、 对于controller层的一些建议

1、controller层不要涉及到太多的业务逻辑，能够将公用的部分抽取到Service层

2、service层：主要负责数据交互和数据处理、处理一些业务领域上的逻辑；
3、controller层：主要负责初始化$scope的变量用于传递给view层，而且处理一些页面交互产生的逻辑;
4、当一个功能是设计远程API调用、数据集、业务领悟复杂逻辑、将会大量反复的运算方法时就能够考虑将代码以service形式注入controller层。

5、controller 里的 $scope 是唯一页面数据来源。

不要直接改动 DOM。

6、controller 不要在全局范围

參考文章：

http://www.jianshu.com/p/1e1aaf0fd30a

http://cnodejs.org/topic/54dd47fa7939ece1281aa54f

http://www.html-js.com/article/1847

http://blog.51yip.com/jsjquery/1601.html

http://www.cnblogs.com/CraryPrimitiveMan/p/3679552.html?utm_source=tuicool&utm_medium=referral

http://www.cnblogs.com/whitewolf/archive/2013/04/16/3024843.html

跟我学AngularJs:Controller数据共享、继承、通信使用具体解释的更多相关文章

  1. Angularjs controller之间的通信

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

  2. Angularjs Controller 间通信机制

    在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...

  3. 【转】Angularjs Controller 间通信机制

    在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...

  4. AngularJS进阶(九)控制器controller之间如何通信

    AngularJS控制器controller之间如何通信 注:请点击此处进行充电! angular控制器通信的方式有三种: 1,利用作用域继承的方式.即子控制器继承父控制器中的内容 2,基于事件的方式 ...

  5. AngularJS 中 Controller 之间的通信

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

  6. angularjs controller 继承

    前沿 最近在angularjs项目当中,看到 controller 好多都是重复性的代码,在 controller 当中有好多代码很相似 function(比如 controller 下的 CRUD ...

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

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

  8. [老老实实学WCF] 第九篇 消息通信模式(上) 请求应答与单向

    老老实实学WCF 第九篇 消息通信模式(上) 请求应答与单向 通过前两篇的学习,我们了解了服务模型的一些特性如会话和实例化,今天我们来进一步学习服务模型的另一个重要特性:消息通信模式. WCF的服务端 ...

  9. (十六)JQuery Ready和angularJS controller的运行顺序问题

    项目中使用了JQuery和AngularJS框架,近期定位一个问题,原因就是JQuery Ready写在了angularJS controller之前,导致JQuery选择器无法选中须要的元素(由于a ...

随机推荐

  1. Static 静态内部类

    Java中的类可以是static吗?答案是可以.在java中我们可以有静态实例变量.静态方法.静态块.类也可以是静态的. java允许我们在一个类里面定义静态类.比如内部类(nested class) ...

  2. Mysql EXISTS NOT EXISTS

    SELECT c.CustomerId, CompanyName FROM Customers c WHERE EXISTS( SELECT OrderID FROM Orders o WHERE o ...

  3. 生成静态页面方法 .NET

    原文发布时间为:2009-09-30 -- 来源于本人的百度文章 [由搬家工具导入] 采用模板法：【例子中的两个页面以及生成的页面均在同一个目录，自己可以去改】 模板Template.htm： < ...

  4. 【Vue起步-Windows】N01：环境安装

    本文基于“vue.js安装过程(npm安装)”文章内容及个人出现的问题整合而成. 1.安装npm环境 在Node官网中下载最新的windows版msi安装包,并默认所有安装选择. 2.查看npm安装版 ...

  5. Win32 OpenGL 编程（ 1 ） Win32 下的 OpenGL 编程必须步骤

    http://blog.csdn.net/vagrxie/article/details/4602961 Win32 OpenGL 编程( 1 ) Win32 下的 OpenGL 编程必须步骤 wri ...

  6. 广州地区常用的DNS解析服务器

    广州电信DNS: 首选:202.96.128.143 备用:202.96.128.68 首选:202.96.134.133 备用:202.96.128.166 首选:61.144.56.100备用:6 ...

  7. 横竖屏切换，activity重建问题

    最近有个需求,横屏直播A退出后返回直播列表页B(竖屏)时,在小米8上列表页B直接变成横屏的了,因为列表页B由竖屏切换成横屏了,还会重新执行生命周期onCreate()-onResume()等等. 为了 ...

  8. Netty内存池

    参考资料:http://blog.csdn.net/youaremoon/article/details/47910971 主要思想:buddy allocation,jemalloc

  9. HDU 5242 Game(树上贪心)

    题目链接 Game 题目的意思很简单, 就是要找一棵树权值最大等等前K条链. 在本题中,走的次数等于min(叶子结点个数,k) tree[i].sum意为从i号结点出发走到某个叶子结点能得到的最大总价 ...

  10. 洛谷——P3387 【模板】缩点

    P3387 [模板]缩点 题目背景 缩点+DP 题目描述 给定一个n个点m条边有向图,每个点有一个权值,求一条路径,使路径经过的点权值之和最大.你只需要求出这个权值和. 允许多次经过一条边或者一个点, ...