本文也同步发表在我的公众号“我的天空”

控制器

控制器可以说是AngularJS中最重要的部分了！之前的一些示例，除了第一讲的示例以外，我们对于AngularJS的使用都集中在HTML部分，其实AngularJS是一个典型的支持MVC架构的框架，MVC是模型（Model）、视图（View）、控制（Controller）的缩写，对于HTML来说我们通常将其归于View，既一个系统展示数据的那部分。MVC的核心是将一个系统的数据展示、逻辑控制、数据源完全的分离，使得各部分之间完全没有耦合。

回到AngularJS，我们之前的示例都集中在HMTL部分，包括指令、数据初始化、表达式、HTML重复等，接下来我们来学习控制器部分，先请看以下代码：

<body ng-app="myApp">
     <div ng-controller="person">
         {{name}}
     </div>
 </body>
 <script>
       var app=angular.module("myApp",[]);
       app.controller("person",function($scope){
            $scope.name="张三";
      });
 </script>

示例代码AngularJS_08.html

学习以上代码，该代码与我们之前的示例代码相比增加了新知识点，而这些是AngularJS中非常关键与重要的部分，一定要理解透彻。

首先我们给ng-app指令命名了，以便在JS代码中可以对其访问。接下来，我们在div中增加了一个新的指令：ng-controller，这个便是控制器，其核心作用是将一个DOM元素（即View）与AngularJS中的controller对象进行了关联，通俗的来说，便是在AngularJS中可以以对象的方式来访问、控制该DOM元素，这样便无需用类似于domcument.getElementById()之类的代码来获取并控制HTML的元素。也许现在大家对于这点还不是太能理解，不要紧，我们继续看其js部分代码。

在js代码中，我们首先通过语句angular.module("myApp",[])定义了一个模块“app”，用以获取AngularJS的应用范围，angular.module()方法有两个参数，前一个参数对应html中的ng-app命名，后一个参数是数组，如果需要依赖外部模块的话，则将外部模块名依次写入数组中，这样在执行时就能够引用了，本例我们不需要引入外部模块，所以写为空数组（我们在后面的AngularJS路由以及AngularJS依赖注入中，将会学习外部模块的引入）。

接下来通过app.controller获取添加了名为“person”控制器的DOM元素，在本示例中为div，随后就可以通过$scope来获得该DOM元素的引用。$scope实际上是一个JavaScript对象，视图（View）和控制器（Controller）都可以访问它，所以我们可以利用它在两者之间传递信息。在本例中，可以简单的将$scope认为就是我们要改写内容的那个div。

最后，我们将$scope中的name属性设置为“张三”，而在div中，我们有一个表达式{{name}}，所以在$scope中对该变量的改写就被同步到HTML上，name的值设置为“张三”，最终便在div中显示“张三”。

在AngularJS的控制器代码编写中，是不应该出现DOM元素的，一切对于DOM的操作都是通过$scope来实现的，如果你发现其代码中必须出现DOM操作语句，那么表明你的设计是不合理的，也许有时候这种写法你会觉得别扭，但是必须慢慢适应，才能感受MVC模式带来的真正好处。

自然而然的，我们立即会想到在一个页面中肯定能支持多个控制器存在，实际情况也确实如此，看以下代码：

<body ng-app="myApp">
    <div ng-controller="person1">
        {{name}}
    </div>
    <div ng-controller="person2">
        <p>{{name}}</p>
    </div>
 </body>
 <script>
     var app=angular.module("myApp",[]);
       app.controller("person1",function($scope){
           $scope.name="张三";
       });
       app.controller("person2",function($scope){
          $scope.name="李四";
       });
 </script>

示例代码AngularJS_09.html

在以上代码中，我们声明了两个控制器person1和person2，其中person2的name是显示在<P>标签中，随后将其赋予不同的值。

如果有多个控制器嵌套，那会怎么样呢？前面说过，$scope实质上是JavaScript对象，因此多个控制器嵌套，便意味着多个$scope嵌套，而$scope遵循着原型继承的原则，这意味着其可以访问父$scope，对于任何属性和方法，如果当前$scope上找不到，则会在父$scope上去找，这个和对象的处理方式是一样的，看以下代码：

<body ng-app="myApp" ng-controller="person">
    职业:{{job}}
    <div ng-controller="person1">
        姓名:{{name}} 职业:{{myjob}}
    </div>
 </body>
 <script>
     var app=angular.module("myApp",[]);
       app.controller("person",function($scope){
          $scope.job="软件工程师";
       });
       app.controller("person1",function($scope){
         $scope.name="张三";
         $scope.myjob=$scope.job;
     });
 </script>

示例代码AngularJS_10.html

在以上代码中，person1位于person内，因此person的$scope可以看做是person1中$scope的父对象。当在person1控制器中执行$scope.myjob=$scope.job时，person1中的$scope并没有job属性，那么它会去找其父对象中（person）是否有该属性，而其父对象person的$scope中是有job属性的，其值为“软件工程师”，因此在person1中，也将显示职业为“软件工程师”。

AngularJS事件

AngularJS支持HTML元素的事件，其是以指令的形式存在的，譬如ng-click为单击事件、ng-mousemove为鼠标移动事件，看以下代码：

<body ng-app="myApp" ng-controller="person">
     <div>
         姓名:{{name}}职业:{{job}}
     </div>
     <input type="button" value="更改" ng-click="change()">
 </body>
 <script>
     var app=angular.module("myApp",[]);
       app.controller("person",function($scope){
         $scope.name="张三";
         $scope.job="软件工程师";
         $scope.change=function(){
             $scope.name="李四";
             $scope.job="律师";
         }
       });
 </script>

示例代码AngularJS_11.html

在以上代码中，我们添加了一个按钮，在其内部添加了一个事件指令ng-click，其指向person中的change()方法，而在person中的$scope，其change()方法是更改name和job的值，这样当单击按钮时，div内的姓名与职业将发生改变。

该系列的示例代码

https://github.com/panyongwow/angularJS

AngularJS（四）：控制器、事件的更多相关文章

  1. AngularJs开发——控制器间的通信

    AngularJs开发——控制器间的通信 指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式 基于scope继承的方式 最简单的让控制 ...

  2. MVVM设计模式和WPF中的实现（四）事件绑定

    MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  3. HTML 事件(四) 模拟事件操作

    本篇主要介绍HTML DOM中事件的模拟操作. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4.  ...

  4. AngularJS HTML DOM& 事件

    AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性 <div ng-app= ...

  5. AngularJS 学习之事件

    1.ng-click指令:定义了AngularJS点击事件 <div ng-app="" ng-controller="myCtrl"> <b ...

  6. angularJS支持的事件

    AngularJS提供可与HTML控件相关联的多个事件.例如ng-click通常与按钮相关联.以下是AngularJS支持的事件. ng-click ng-dbl-click ng-mousedown ...

  7. angularjs的touch事件

    angularJs没有touch事件.这里提供一个touch指令. ngTouch.js "use strict"; angular.module("ngTouch&qu ...

  8. SteamVR Unity工具包（VRTK）之概览和控制器事件

    快速上手 · 克隆仓库  git clone https://github.com/thestonefox/SteamVR_Unity_Toolkit.git · 用Unity3d打开SteamVR_ ...

  9. Ⅶ.AngularJS的点点滴滴-- 事件

    事件(和js一样有冒泡和捕获) <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2 ...

  10. angularjs的ng-change事件演示

    今天练习angularjs的ng-change事件. 比如用户作出选择时,系统所指定的选项中,没有用户合适的选项.此时我们可以让用户填写. 刚开始文本框是隐藏的.当用户选择了checkbox之后才会显 ...

随机推荐

  1. CF285 E Positions in Permutations——“恰好->大于”的容斥和允许“随意放”的dp

    题目:http://codeforces.com/contest/285/problem/E 是2018.7.31的一场考试的题,当时没做出来. 题解:http://www.cnblogs.com/y ...

  2. poj2823Sliding Window——单调队列

    题目:http://poj.org/problem?id=2823 单调队列模板. 代码如下: #include<iostream> #include<cstdio> usin ...

  3. winform 控件合集2

    http://www.cnblogs.com/peterzb/archive/2009/06/18/1505424.html 包含自定义绘制的ListBox, 带拖动,图片显示, 内嵌其它控件, 打印 ...

  4. NGUI panel 之下widget最大depth是1000，超过1000时OnClick会出问题！

    经过我的测试发现ngui widget的depth是有限制的!原本以为只要不同panel间的depth设置好了后无论widget depth如何设置都没问题,直到我们项目中出现奇怪的点击问题后才发现这 ...

  5. python脚本修改hosts文件

    用python3写了个修改hosts的小脚本,没有技术含量,顺带复习一下文件操作和os.sys模块的内容了. # -*- coding:utf-8 -*- #!/usr/bin/env python ...

  6. linux忘记登陆密码的两种破解办法

    对于使用grub引导的linux系统.在开机自检后,出现grub引导界面时,按E键进入编辑模式,如下图所示:   把光标移到带有“kernel”字样的那一行,然后按E键编辑,如图:   在末尾按一个空 ...

  7. POJ 1064 Cable master (二分)

    题意:给定 n 条绳子,它们的长度分别为 ai,现在要从这些绳子中切出 m 条长度相同的绳子,求最长是多少. 析:其中就是一个二分的水题,但是有一个坑,那么就是最后输出不能四舍五入,只能向下取整. 代 ...

  8. 安装VMware-tools出现initctl: Job failed to start

    安装VMware-tools中出现: ******* Creating a new initrd boot image for the kernel.update-initramfs: Generat ...

  9. HDU - 6114 2017百度之星初赛B Chess

    Chess  Accepts: 1805  Submissions: 5738  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 32768 ...

  10. HDU - 6113 2017百度之星初赛A 度度熊的01世界

    度度熊的01世界  Accepts: 967  Submissions: 3064  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 327 ...