您的位置：首页 > 其它

关于$emit和$broadcast的理解与测试

2013-04-10 10:02 134 查看

$emit和$broadcast使得event、data在controller与view之间的传递变的简单。

$emit只能向parent controller传递event与data
$broadcast只能向child controller传递event与data

先看测试代码：

emit-broadcast.html

<!DOCTYPE html>
<html>
<head>
<link href="../bootstrap.css" rel="stylesheet"/>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="../bootstrap.js"></script>
<script type="text/javascript" src="../angular.js"></script>
<script type="text/javascript" src="emit-broadcast.js"></script>
<style>
.ng-scope {
border: 1px dotted red;
}
</style>
</head>
<body>
<div ng-app="" class="container">
<div ng-controller="EventController" class="span12">
Root scope MyEvent count: {{count}}
<ul>
<li ng-repeat="i in [1]" ng-controller="AbcController">
<button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
<button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button>
<br>
Middle scope MyEvent count: {{count}}
<ul>
<li ng-repeat="item in [1, 2]" ng-controller="EventController">
- Leaf scope MyEvent count: {{count}}
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

emit-broadcast.js

function EventController($scope) {
$scope.count = 0;
$scope.$on('MyEvent', function() {
$scope.count++;
});

}

function AbcController($scope) {

// $scope.count = 0;

$scope.fireEvent = function() {
$scope.$emit('MyEvent');
$scope.$broadcast('MyEvent');
};
}

*注意resources的location哦，建议使用chrome调试，比较方便

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航