Ⅶ.AngularJS的点点滴滴-- 事件
2024-10-20 00:38:29
事件(和js一样有冒泡和捕获)
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<div ng-controller="parent">parent:{{detail}}
<div ng-controller="test">
myself:{{detail}}
<div ng-controller="child">child:{{detail}}</div>
<button ng-click="addparent()">addparent</button>
<button ng-click="addchild()">addchild</button>
</div>
</div>
<script>
var app = angular.module('app', [])
.controller('parent', ['$scope',function($scope) {
$scope.detail =1;
$scope.$on('add',function(){
$scope.detail +=1;
});
}]).controller('child', ['$scope',function($scope) {
$scope.detail =1;
$scope.$on('add',function(){
$scope.detail +=1;
});
}]).controller('test', ['$scope',function($scope) {
$scope.detail =1;
$scope.$on('add',function(){
$scope.detail +=1;
});
$scope.addparent=function(){
$scope.$emit('add');
};
$scope.addchild=function(){
$scope.$broadcast('add');
};
}]);
angular.bootstrap(document, ['app']);
</script>
</html>从上面的代码可以看出$on来订阅一个事件,$emit触发的事件会冒泡处理,
$broadcast触发的事件会捕获,
系统还有很多自带的事件可以订阅,比如路由成功与否的$routeChangeError和$routeChangeSuccess
ng-bind-html-unsafe(新版本中被移除,可以新建指令依赖ngSanitize)
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular-sanitize.js"></script>
<div ng-controller="parent" ng-bind-html-unsafe="html"></div>
<script>
angular.module('app', ['ngSanitize']).config(['$compileProvider',
function($compileProvider) {
$compileProvider.directive({
ngBindHtmlUnsafe: function() {
return function(scope, element, attr) {
element.addClass('ng-binding').data('$binding', attr.ngBindHtmlUnsafe);
scope.$watch(attr.ngBindHtmlUnsafe,
function ngBindHtmlUnsafeWatchAction(value) {
element.html(value || '');
});
}
}
});
}]).controller('parent', ['$scope',
function($scope) {
$scope.html = "<span>aaa</span>";
}]);
angular.bootstrap(document, ['app']);
</script>
</html>前面了解了指令的用法后,应该觉得很简单啦
- 上一篇：Ⅵ.AngularJS的点点滴滴-- 指令
- 本文链接地址：Ⅶ.AngularJS的点点滴滴-- 事件
最新文章
- 用C++实现Linux中shell的ls功能
- Javascript设置对象属性为"只读"
- jenkins 中 Poll SCM 和 Build periodically 的区别
- Linux环境下stl库使用(map)
- Java for LeetCode 050 Pow(x, n)
- iOS 面试题及答案
- [MODx] 1. Add Html5 template into the MODx
- shell 实例学习
- linux编程基础汇总贴
- Chapter 2 User Authentication, Authorization, and Security（11）：在已还原的数据库中修正登录映射错误
- python中__init__和__new__的区别
- 安卓权限申请处理框架Android-UsesPermission
- Android的Base64的坑
- Linux查看服务器配置常用
- 关于unity3dGUI（uGUI）的一些自适应的收获，在这里跟大家分享一下
- 【Alpha 冲刺】8/12
- 【CC】Batman and Tree
- 部分Android或IOS手机拍照后照片被旋转的问题
- hasura-graphql 集成 pipelinedb 1.0.0
- iOS之面试题：腾讯三次面试以及参考思路