基于AngularJS入门与进阶（江荣波 著）这本书的笔记
AngularJS 1.x的demo
AngularJS1.x和Angular2,4,5是不一样的两个东西，构建方式，语法，都很多不同
AngularJs 作用域支持两种传送方法：
- 事件从子作用域路由到父作用域中
- 事件从父作用域广播到所有子作用域中
与AngularJS作用域事件相关的方法有$on()、$emit()、$broadcast()
$emit() 方法实现事件上级路由
$emit方法用于实现事件从子路由作用域路由到父作用域中。$emit方法第一个尝试为事件名称，后面可以传入一个或多个参数，这些参数能够被传递到父作用域注册的事件监听中
示例代码
<!DOCTYPE html>
<html lang="en" ng-app="scopeApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/lib/angular/angular.js"></script>
<script type="text/javascript">
var scopeApp = angular.module("scopeApp",[]);
scopeApp.controller("parentController",function ($scope,$log) {
$scope.$on("childInfoEvent",function (event,data) {
$scope.parent = data;
})
});
scopeApp.controller("childController",function ($scope,$log) {
// 如果值改变了广播到上级作用域
$scope.$watch("child",function (newValue,oldValue) {
if(newValue == oldValue){
return;
}
$scope.$emit("childInfoEvent",newValue);
})
});
</script>
</head>
<body >
<div ng-controller="parentController">
Parent:{{parent}}
<div ng-controller="childController">
child:<input type="text" ng-model="child">
</div>
</div>
</body>
</html>
20190818_230928[00-00-01--00-00-07].gif
代码演示可以看出，当子作用域值改变后，可以通过父级的$on方法监听到，并作出动作。$on 方法有两个参数，第一个参数为监听的事件名childInfoEvent，第二个参数为事件监听器定义部分，function中有两个参数，第一个参数为事件对象，第二个参数为子作用域中传递的数据
$broadcast() 方法实现事件下级广播
$broadcast() 方法的使用和$emit()方法相同，不同点是他是向子作用域广播事件
示例代码
<!DOCTYPE html>
<html lang="en" ng-app="scopeApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/lib/angular/angular.js"></script>
<script type="text/javascript">
var scopeApp = angular.module("scopeApp",[]);
scopeApp.controller("parentController",function ($scope,$log) {
// 如果值改变了广播到子作用域
$scope.$watch("parent",function (newValue,oldValue) {
if(newValue == oldValue){
return;
}
$scope.$broadcast("parentInfoEvent",newValue);
})
});
scopeApp.controller("childController1",function ($scope,$log) {
$scope.$on("parentInfoEvent",function (event,data) {
$scope.child = data;
})
});
scopeApp.controller("childController2",function ($scope,$log) {
$scope.$on("parentInfoEvent",function (event,data) {
$scope.child = data;
})
});
</script>
</head>
<body >
<div ng-controller="parentController">
Parent:<input type="text" ng-model="parent">
<div ng-controller="childController1">
child1:{{child}}
</div>
<div ng-controller="childController2">
child2:{{child}}
</div>
</div>
</body>
</html>
20190818_230804[00-00-00--00-00-06].gif
同级广播
$broadcast() 和$emit()方法分别实现向下和向上的事件广播和路径，这里做一个简单的实现同级广播的方法
<!DOCTYPE html>
<html lang="en" ng-app="scopeApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/lib/angular/angular.js"></script>
<script type="text/javascript">
var scopeApp = angular.module("scopeApp",[])
scopeApp.service("rootService",function ($rootScope) {
return {
change:function (n) {
$rootScope.$broadcast("valueInfoEvent", n);
}
}
});
// 注入自定义服务rootService
scopeApp.controller("brother1",function ($scope,$log,rootService) {
$scope.$watch("browser",function (newValue,oldValue) {
if(newValue == oldValue){
return;
}
rootService.change(newValue);
});
$scope.$on("valueInfoEvent",function (event,data) {
$scope.browser = data;
})
});
scopeApp.controller("brother2",function ($scope,$log,rootService) {
$scope.$watch("browser",function (newValue,oldValue) {
if(newValue == oldValue){
return;
}
rootService.change(newValue);
});
$scope.$on("valueInfoEvent",function (event,data) {
$scope.browser = data;
})
});
</script>
</head>
<body >
<div ng-controller="brother1">
brother1:<input type="text" ng-model="browser">
</div>
<div ng-controller="brother2">
brother2:<input type="text" ng-model="browser">
</div>
</body>
</html>
20190818_234633[00-00-00--00-00-06].gif
rootScope.
on("valueInfoEvent") `事件并作出相应处理，就实现了同级广播。
作用域对像$on()方法
上面不管是向上，向下，同级广播都用到了$on()方法，$on 方法有两个参数，第一个参数为监听的事件名childInfoEvent，第二个参数为事件监听器定义部分，function中有两个参数，第一个参数为事件对象，第二个参数为子作用域中传递的数据
$scope.$on("valueInfoEvent",function (event,data) {
$scope.browser = data;
})
data没什么说的，就是传递数据，event有些内置属性和方法
- event.name：事件的名称。
- event.targetScope：事件源作用域对象。
- event.currentScope：当前作用域对象。
- event.stopPropagation()：这个方法用于停止事件的进一步传播。需要注意的是，该方法只对向父作用域路由事件起作用，当在某个事件监听处理方法中调用事件对象的stopPropagation()方法后，事件将不会再向上级父作用域路由。它对调用$broadcast()方法广播的事件不起作用。
- event.preventDefault()：这个方法实际上不会做什么操作，但是会设置defaultPrevented属性为true，直到事件监听器的实现者采取行动之前才会检查defaultPrevented的值。
- event.defaultPrevented：如果调用了event.preventDefault()方法，那么该属性将被设置为true。
网友评论