标签：
1.首先我们创建一个模块
var module = angular.module( "my.new.module", [] );
2.然后写具体的service 可以看到它是一个很有趣的对象 ,以键值对的方式定义属性和值, 值可能是数组,json对象数组,或者函数
appServices.service(‘Book‘,[‘$rootScope‘,function($rootScope){ var service = { books: [ {title:‘bbq‘,anthor:‘李斯‘}, {title:‘barbecue‘,anthor:‘loli‘} ], addBook: function(a_book){ service.books.push(a_book); $rootScope.$broadcast( ‘books.update‘ ); //这里相当于定义了一个回调函数,任何调用这个图书服务的指令,控制器,过滤器等可以选择实现这个books.update句柄 来进行addBook后想执行的操作,如更新$scope } } return service; }]);
note:这是通常一个简单的service的写法
$broadcast只能向child controller传递event与data
$emit只能向parent controller传递event与data
$on用于接收event与data
controller之间的层级关系 (controller可以任意嵌套):
<div class="box row" ng-controller="parentCtrl"> <div class="col-xs-12"> <a ng-click="clickMe()" >click me!->i belong parent controller</a> <div ng-controller="AChildCtrl"> <a ng-click="clickMe()" s>click me!->i belong child&&brother controller</a> </div> <div ng-controller="BChildCtrl"> <a ng-click="clickMe()" >click me!->i belong child&&brother controller</a> </div> </div> </div>
$broadcast $emit $on 的应用 appCtrls.controller(‘parentCtrl‘,[‘$scope‘,function($scope){ $scope.clickMe = function(){ var book = { title:‘monkey‘ , author:‘lee‘ } $scope.$broadcast(‘givetochild‘,book); } }]); appCtrls.controller(‘AChildCtrl‘,[‘$scope‘,function($scope){ var book = { title:‘fifty shadows‘ , author:‘mcdownload‘ } $scope.$emit = (‘givetoparent‘, book); //向父级传值 }]); appCtrls.controller(‘BChildCtrl‘,[‘$scope‘,function($scope){ $scope.$on(‘givetochild‘,function(event,data){ console.log(data.title + ‘ ‘ + data.author); //输出 mokey 和 lee console.log(event); }); }]);
比较奇怪的现象是如果
appCtrls.controller(‘parentCtrl‘,[‘$scope‘,function($scope){ var book = { title:‘monkey‘ , author:‘lee‘ } $scope.$broadcast(‘givetochild‘,book); }]);
那么总是不会触发$on,得不到任何输出
但是如果,总会正常得到值
appCtrls.controller(‘parentCtrl‘,[‘$scope‘,‘$timeout‘,function($scope,$timeout){ $timeout(function(){ var book = { title:‘monkey‘ , author:‘lee‘ } $scope.$broadcast(‘givetochild‘,book); },10); }]);
service的使用简单代码实例为
template: <div class="box row" ng-controller="books.list"> <div class="col-xs-12"> <p ng-repeat="book in books">{{book.title}} -- {{book.author}}</p> <input type="text" ng-model="book_title" placeholder="请输入书名"><br> <input type="text" ng-model="book_author" placeholder="请输入作者"><br> <a ng-click="addBook()">添加书籍</a> </div> </div> controller: var appCtrls = angular.module(‘appCtrls‘,[]); appCtrls.controller(‘books.list‘,[‘$scope‘,‘Book‘,function($scope,Book){ $scope.books = Book.books; //取用图书服务 $scope.addBook = function(){ var a_book = { title:$scope.book_title , author:$scope.book_author } Book.addBook(a_book); } $scope.$on(‘books.update‘,function(event){ $scope.books = Book.books; }); }]); service: var appServices = angular.module(‘appCtrls‘); appServices.service(‘Book‘,[‘$rootScope‘,function($rootScope){ var service = { books: [ {title:‘bbq‘,author:‘李斯‘}, {title:‘barbecue‘,author:‘loli‘} ], addBook: function(a_book){ service.books.push(a_book); $rootScope.$broadcast( ‘books.update‘ ); } } return service; }]);
此外,$on还暴露了更多我们可以用到的东西,如果你需要的话
在$on的方法中的event事件参数，其对象的属性和方法如下
事件属性 目的 event.targetScope 发出或者传播原始事件的作用域 event.currentScope 目前正在处理的事件的作用域 event.name 事件名称 event.stopPropagation() 一个防止事件进一步传播(冒泡/捕获)的函数(这只适用使用`$emit`发出的事件)
event.preventDefault() 这个方法实际上不会做什么事，但是会设置`defaultPrevented`为true。
直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。 event.defaultPrevented 如果调用了`preventDefault`则为true
标签：
原文地址：http://www.cnblogs.com/isdom/p/webclips008.html
