angular中实现控制器之间传递参数的方式
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了angular中实现控制器之间传递参数的方式,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3683字,纯文字阅读大概需要6分钟。
内容图文
![angular中实现控制器之间传递参数的方式](/upload/InfoBanner/zyjiaocheng/345/e6641ff8306540e39a1bf81ed1abd2b2.jpg)
在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中也会得到修改过后的值。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的angular中实现控制器之间传递参数的方式全部内容,希望文章能够帮你解决angular中实现控制器之间传递参数的方式所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。