关联目录索引：
重温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() 方法带有两个参数。
-
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); }
});
});
网友评论