Angularjs通过$scope实现事件功能,因此,事件有2种,像上传播
和向下传播
。
神奇的$scop
$scope
是一个 POJO(Plain Old JavaScript Object)$scope
提供了一些工具方法$watch()/$apply()
$scope
是表达式的执行环境(或者叫作用域)$scope
是一个树形结构,与DOM标签平行。- 子
$scope
对象会继承父$scope
上的属性和方法。 - 每一个Angular应用只有一个
根$scope
对象(一般位于ng-app上面的) $scope
可以传播事件,类似于DOM事件,可以向上也可以向下。$scope
不仅是MVC的基础,也是后面实现双向数据绑定的基础。- 可以用
angular.element($0).scope()
进行调试。
代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script src="https://www.orchome.com/user/js/angular-1.5.8.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="EventController">
Root scope <tt>MyEvent</tt> count : {{count}}
<ul>
<li ng-repeat="i in [1]" ng-controller="EventController">
<button ng-click="$emit('MyEvent')">
$emit('MyEvent')
</button>
<button ng-click="$broadcast('MyEvent')">
$broadcast('MyEvent')
</button>
<br/>
Middle scope
<tt>MyEvent</tt> count:{{count}}
<ul>
<li ng-repeat="item in [1,2]" ng-controller="EventController">
Leaf scope
<tt>MyEcent</tt> count:{{count}}
</li>
</ul>
</li>
</ul>
</div>
</body>
<script>
var app = angular.module("app", []);
app.controller("EventController", function ($scope) {
$scope.count = 0;
$scope.$on('MyEvent', function (event) {
$scope.count++;
})
});
</script>
</html>