angular中实现控制器之间传递参数的方式
在angular中,每个controller(控制器)都会有自己的$scope,通过为这个对象添加属性赋值,就可以将数据传递给模板进行渲染,每个$scope只会在自己控制器内起作用,而有时候需要用到其他控制器中的数据,这个时候就要考虑到控制器之间参数的传递了。
1.通过$rootscope传参
首先,在angular中存在作用域的继承,继承作用域符合JavaScript的原型继承机制,这意味着如果我们在子作用域中访问一个父作用域中定义的属性,JavaScript首先在子作用域中寻找该属性,没找到再从原型链上的父作用域中寻找,如果还没找到会再往上一级原型链的父作用域寻找。在AngularJS中,作用域原型链的顶端是$rootScope,AnguarJS将会寻找到$rootScope为止,如果还是找不到,则会返回undefined。
{{name}}
{{name}}
varapp=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)子向父控制器传值
{{name}}
{{name}}