重温AngularJS（八）-- 事件

关联目录索引：
重温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 点击事件。





{{ count }}

隐藏 HTML 元素

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






名: 

姓名: 



Full Name: {{firstName + " " + lastName}}

分析：
应用有一个默认属性: $scope.myVar = false;
ng-hide 指令设置

元素及两个输入域是否可见，根据 myVar 的值 (true 或 false) 来设置是否可见。
toggle() 函数用于切换 myVar 变量的值（true 和 false）。
ng-hide="true" 让元素不可见。

显示 HTML 元素

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






名: 

姓: 



姓名: {{firstName + " " + lastName}}

使用$emit来冒泡事件

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

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

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

name (字符串)
要发出的事件名称。
args (集合)
一个参数的集合，作为对象传递到事件监听器中。

使用$broadcast向下传递事件

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

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

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

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

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

name（字符串）
要发出的事件名称。
args（集合）
一个参数的集合，作为对象传递到事件监听器中。

事件监听

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

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

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

核心系统的 $emitted 事件

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

事件	描述
$includeContentLoaded	当`ngInclude`的内容重新加载时，从`ngInclude`指令上触发
$includeContentRequested	从调用`ngInclude`的作用域上发送，每次`ngInclude`的内容被请求时，它都会发送
$viewContentLoaded	每当`ngView`内容被重新加载时，从当前`ngView`作用域上发送

核心系统的 $broadcast 事件

事件	描述
$locationChangeStart	从`$location`服务对浏览器的地址作更新时，会触发`$locationChangeStart`事件
$locationChangeSuccess	当且仅当浏览器的地址成功变更，又没阻止`$locationChangeStart`事件的情况下，`$locationChangeSuccess`事件会从`$rootScope`上广播出来
$routeChangeStart	在路由变更发生之前调用
$routeChangeSuccess	在所有路由依赖项跟着`$routeChangeStart` 被解析之后，此监听从`$rootScope`上广播出来
$routeChangeError	如果路由对象上任意的resolve属性被拒绝了，此监听就会被触发
$routeUpdate	如果`$routeProvider`上的reloadOnSearch属性被设置成false，并且使用了控制器的同一个实例，`$routeUpdate`事件会被从`$rootScope`上广播
$destroy	在作用域被销毁之前，此事件会在作用域上广播

栗子：

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); }
      });
  });