在angular中,每一个controller(掌握器)都邑有本身的$scope,经由过程为这个对象增加属性赋值,就能够将数据通报给模板举行衬着,每一个$scope只会在本身掌握器内起作用,而有时刻须要用到其他掌握器中的数据,这个时刻就要考虑到掌握器之间参数的通报了。
1.经由过程$rootscope传参
起首,在angular中存在作用域的继续,继续作用域相符 JavaScript 的原型继续机制,这意味着假如我们在子作用域中接见一个父作用域中定义的属性,JavaScript 起首在子作用域中寻觅该属性,没找到再从原型链上的父作用域中寻觅,假如还没找到会再往上一级原型链的父作用域寻觅。在 AngularJS 中,作用域原型链的顶端是$rootScope,AnguarJS 将会寻觅到$rootScope 为止,假如照样找不到,则会返回 undefined。
<div ng-app="app">
<div ng-controller="parent">
{{name}}
<div ng-controller="son">
{{name}}
</div>
</div>
</div>
var app=angular.module("app",[]);
app.controller('parent', ['$scope',function ($scope) {
$scope.name="hello";
}]);
app.controller('son', ['$scope',function ($scope) {
console.log($scope.name);//hello
}]);
在子掌握器中打印name,但我们发明在这个掌握器中并未为$scope增加name,因而向父作用域查找,发明父作用域存在该属性,所以能够打印出来。
$rootscope 是一切 $scope 的最上层对象,能够理解为一个 Angular 运用中的全局作用域对象。所认为$rootscope增加的属性,在一切的掌握器中都能够接见获得。然则为它附加太多逻辑或许变量并非一个好主意,和js全局污染是一样的.
2.经由过程事宜的体式格局
起首引见一下angular中的事宜播送:
$on(name,handler) 注册一个事宜处置惩罚函数,该函数在特定的事宜被当前作用域收到(从父级或许子级作用域)时将被挪用。
$emit(name,args) 向当前父作用域发送一个事宜,直至根作用域。
$broadcast(name,args) 向当前作用域下的子作用域发送一个事宜。
name示意事宜称号,args示意事宜流传的数据,handler示意在接收到通报时要实行的回调,该回调中有event参数,示意事宜,有以下要领:
event.targetScope 猎取流传事宜的作用域
event.currentScope 猎取吸收事宜的作用域
event.name 流传的事宜的称号
event.stopPropagation() 阻挠事宜举行冒泡流传,仅在$emit事宜中有用
event.preventDefault() 阻挠流传事宜的发作
event.defaultPrevented 假如挪用了preventDefault事宜则返回true
1)子向父掌握器传值
<div ng-app="app">
<div ng-controller="parent">
{{name}}
<div ng-controller="son">
{{name}}
</div>
</div>
</div>
var app=angular.module("app",[]);
app.controller('parent', ['$scope',function ($scope) {
$scope.$on('call', function(event,data){
$scope.name=data;
console.log(data);
});
}]);
app.controller('son', ['$scope',function ($scope) {
$scope.name="hello";
$scope.$emit('call', $scope.name);
}]);
2)父向子掌握器传值
var app=angular.module("app",[]);
app.controller('parent', ['$scope',function ($scope) {
$scope.name="hello";
$scope.$broadcast('call', $scope.name);//传值
}]);
app.controller('son', ['$scope',function ($scope) {
$scope.$on('call', function(event,data1){
$scope.name1=data1;//接收值
});
}]);
注重:参数name相同时,父子掌握器之间才能够传值
这类体式格局不可完成兄弟级传值,不过能够运用父级掌握器作为中介,先由子掌握器传值给父掌握器,然后再由父掌握器通报给别的的子掌握器。
补充:之前碰到一个需求是,父掌握器中,触发change事宜后,猎取数据通报给子掌握,然则在子掌握器只须要接收一次,发明可经由过程以下体式格局:
var scan=$scope.$on(name,handler);scan();这模样掌握器就只接收可一次,避免了屡次接收带来的影响!
3.经由过程效劳
在angular中效劳是一个单例,所以在效劳中天生一个对象,该对象就能够应用依靠注入的体式格局在一切的掌握器中同享。
例:
var app=angular.module("app",[]);
app.controller('myCtrl', ['$scope','appService',function ($scope,appService) {
appService.name="hi!!"
}]);
app.controller('myCtrl1', ['$scope', 'appService',function ($scope,appService) {
$scope.name=appService.name;
}]);
app.service("appService", [function(){
this.name="hello";
}]);
经由过程在appService这个效劳中增加对象,然后在须要用到的掌握器中,经由过程依靠注入的体式格局导入该效劳,在myCtrl掌握器中修正这个对象,在myCtrl1中也会获得修正事后的值。