angular js 事件
2016-01-19 10:22
615 查看
(1)angular js支持的事件
ng-click
ng-dbl-click
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-keydown
ng-keyup
ng-keypress
ng-change
(2)实例
点击按钮,实现“测试”的显示与隐藏
(3)自定义事件传播
1.前提
必须有controller嵌套,否则无法接收事件
所有的事件都是从SelfCtrl发出
2.$broadcast
事件发送的方法:
3.$emit
事件发送的方法:
4.说明
不管是$broadcast还是$emit,兄弟controller永远都不会收到事件
ng-click
ng-dbl-click
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-keydown
ng-keyup
ng-keypress
ng-change
(2)实例
点击按钮,实现“测试”的显示与隐藏
<!DOCTYPE html> <html ng-app="testEvent"> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body ng-controller="myctrl"> <span ng-hide="isHide">测试</span> <button ng-click="toggle()">隐藏/显示</button> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script> var app = angular.module( "testEvent", [] ); app.controller("myctrl",function($scope){ $scope.isHide = false; $scope.toggle = function(){ $scope.isHide = !$scope.isHide; } }); </script> </body> </html>
(3)自定义事件传播
1.前提
必须有controller嵌套,否则无法接收事件
<div ng-controller="ParentCtrl"> <div ng-controller="SelfCtrl"> <a class="btn" ng-click="click()">click me</a> <div ng-controller="ChildCtrl"></div> </div> <div ng-controller="BroCtrl"></div> </div>这里四个controller的层级关系如下:
所有的事件都是从SelfCtrl发出
2.$broadcast
事件发送的方法:
$scope.$broadcast事件的接收方法:
$scope.$onbroadcast是从发送者向他的子scope发送事件的一个方法,所以父scope不会收到
angular.module('TestApp', ['ng']) .controller('ParentCtrl', function($scope) { $scope.$on('to-child', function(e, d) { console.log('关我毛事'); }); }) .controller('SelfCtrl', function($scope) { $scope.click = function () { $scope.$broadcast('to-child', 'haha'); } }) .controller('ChildCtrl', function($scope){ $scope.$on('to-child', function(e, d) { console.log('I\' the child, I got it', d); }); }) .controller('BroCtrl', function($scope){ $scope.$on('to-child', function(e, d) { console.log('关我毛事'); }); }) ;
3.$emit
事件发送的方法:
$scope.$broadcast只有父scope能够收到
angular.module('TestApp', ['ng']) .controller('ParentCtrl', function($scope) { $scope.$on('to-parent', function(e, d) { console.log('we are the parent, I got it', d); }); }) .controller('SelfCtrl', function($scope) { $scope.click = function () { $scope.$emit('to-parent', 'hehe'); } }) .controller('ChildCtrl', function($scope){ $scope.$on('to-parent', function(e, d) { console.log('关我毛事'); }); }) .controller('BroCtrl', function($scope){ $scope.$on('to-parent', function(e, d) { console.log('关我毛事'); }); }) ;
4.说明
不管是$broadcast还是$emit,兄弟controller永远都不会收到事件
相关文章推荐
- 判断js对象的数据类型,有没有一个最完美的方法?
- JSONOjbect,对各种属性的处理
- javascript的学习路子
- JSTL中c:set标签的用法
- 界面显示这个时间格式的js代码: 2016年1月19日 星期二 乙未(羊)年 腊月初十
- js-格式化数字保留两位小数-带千分符
- 开始JavaScript
- 学习JavaScript设计模式之装饰者模式
- //普通字符串转JSON字符串转字典
- jstl标签
- 了解JavaScript
- 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
- 关于使用JSONKit一直崩溃
- JS常用小技巧
- js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
- jsp
- 图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
- 排序—归并排序(js实现)
- JavaScript两大支柱-PART1:如何逃脱第七层地狱(译)
- 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入