angular中实现控制器之间传递参数的方式
在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中也会得到修改过后的值。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了掌握Queries设计模式优化Angular应用开发的技巧示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-10-10
这篇文章主要为大家详细介绍了Angular2 PrimeNG分页模块学习教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
本文主要介绍AngularJS ng-app 指令，这里整理了ng-app指令的一些资料，并附实例代码，有需要的小伙伴可以参考下2016-07-07
这篇文章主要介绍了解析Angular 2+ 样式绑定方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了Angular事件之不同组件间传递数据的方法，利用Angular Event在不同组件之间传递数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了详解Angular2中Input和Output用法及示例，对于angular2中的Input和Output可以和AngularJS中指令作类比，有兴趣的可以了解一下2017-05-05
Angular项目如何使用拦截器 httpClient 请求响应处理
这篇文章主要介绍了Angular项目简单使用拦截器httpClient请求响应处理,目前我的Angular版本是Angular 17.3,版本中实现请求和响应的拦截处理了,这种机制非常适合添加如身份验证头、错误统一处理、日志记录等功能,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了Angular2生命周期钩子函数的详细介绍，Angular提供组件生命周期钩子，可以让我们更好的开发Angular应用，有兴趣的可以了解一下2017-07-07
众所周知AngularJS的双向绑定在表单应用中强大又方便，但是偶尔会遇到需要解除对象变量的双向绑定。Angular提供的angular.copy的方法可以实现解除双向绑定。所以这篇文章就来给大家详细的介绍下angular.copy，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-11-11
本篇文章主要介绍了详解angular中的作用域及继承，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
最新评论