关联目录索引：
重温AngularJS（一）-- 表达式、指令
重温AngularJS（二）-- 模型ng-model指令
重温AngularJS（三）-- Scope(作用域)
重温AngularJS（四）-- 控制器ng-controller
重温AngularJS（五）-- 过滤器
重温AngularJS（六）-- 服务Service
重温AngularJS（七）-- Select(选择框)、表格
重温AngularJS（八）-- 事件
重温AngularJS（九）-- 模块、全局API
重温AngularJS（十）-- 表单、输入验证
重温AngularJS（十一）-- 包含、动画
重温AngularJS（十二）-- 依赖注入（5个核心组件）
重温AngularJS（十三）-- 路由

作者：Zyao89；转载请保留此行，谢谢；

什么是事件？

如同浏览器响应浏览器层的事件，比如鼠标点击，页面滚动，AngularJS应用也可以响应自己的 HTML 事件。这使我们可以在应用中嵌套的各组件之间进行通信，即使这些组件在创建时并未考虑到其它组件。

ng-click 指令

ng-click 指令定义了 AngularJS 点击事件。

<div ng-app="" ng-controller="myCtrl">

<button ng-click="count = count + 1">点我！</button>

<p>{{ count }}</p>

</div>

隐藏 HTML 元素

ng-hide 指令用于设置应用部分是否可见。
ng-hide="true" 设置 HTML 元素不可见。
ng-hide="false" 设置 HTML 元素可见。

<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
});
</script>

分析：
应用有一个默认属性: $scope.myVar = false;
ng-hide 指令设置 <p>元素及两个输入域是否可见， 根据 myVar 的值 (true 或 false) 来设置是否可见。
toggle() 函数用于切换 myVar 变量的值（true 和 false）。
ng-hide="true" 让元素 不可见。

显示 HTML 元素

ng-show 指令可用于设置应用中的一部分是否可见 。
ng-show="false" 可以设置 HTML 元素 不可见。
ng-show="true" 可以以设置 HTML 元素可见。
以下实例使用了 ng-show 指令:

<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-show="myVar">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    }
});
</script>

使用$emit来冒泡事件

把事件从子作用域派送到父作用域。在产生事件的作用域之上的所有作用域都会收到这个事件通知。

scope.$emit('user : logged_in', scope.user);

$emit() 方法带有两个参数。

1. name (字符串)
   要发出的事件名称。

2. args (集合)
   一个参数的集合，作为对象传递到事件监听器中。

使用$broadcast向下传递事件

把事件从父作用域传递到子作用域。

scope.$broadcast('cart : checking_out', scope.cart);

在 $broadcast() 方法上，每个注册了监听器的子作用域都会收到这个信息。事件传播到所有的指令和当前作用域间接作用域上，并且一路往下调用到每个监听器。

用了 $broadcast() 方法之后，就不能取消事件的发送了。

$broadcast() 方法自身带有两个参数。

1. name（字符串）
   要发出的事件名称。

2. args（集合）
   一个参数的集合，作为对象传递到事件监听器中。

事件监听

$on() 方法监听一个事件。可监听具有某个特定名称的事件类型。
例如，路由变更过程被触发时，监听事件：

scope.$on('$routeChangeStart', 
    function(evt, next, current){
          // 一个新的路由被触发了
});

evt 对象作为第一个参数传给正在监听的一切事件。

核心系统的 $emitted 事件

$scope.$on('$includeContentLoaded',
  function(evt){
});

核心系统的 $broadcast 事件

栗子：

angular.module('myApp')
  .controller('MainController', function($scope, $timeout) {
      var timer;
      var updateTime = function() {
          $scope.date = new Date();
          timer = $timeout(updateTime, 1000);
      }
      //开始更新时间
      timer = $timeout(updateTime, 1000);

      //在销毁控制器前， 清除定时器
      $scope.$on('$destroy', function() {
          if (timer) { $timeout.cancel(time); }
      });
  });