在angular中,每个controller(控制器)都会有自己的$scope,通过为这个对象添加属性赋值,就可以将数据传递给模板进行渲染,每个$scope只会在自己控制器内起作用,而有时候需要用到其他控制器中的数据,这个时候就要考虑到控制器之间参数的传递了。
1.通过$rootscope传参
首先,在angular中存在作用域的继承,继承作用域符合 JavaScript 的原型继承机制,这意味着如果我们在子作用域中访问一个父作用域中定义的属性,javascript 首先在子作用域中寻找该属性,没找到再从原型链上的父作用域中寻找,如果还没找到会再往上一级原型链的父作用域寻找。在 AngularJS 中,作用域原型链的顶端是$rootScope,AnguarJS 将会寻找到$rootScope 为止,如果还是找不到,则会返回 undefined。
<div ng-app="app">
<div ng-controller="parent" >
<span ng-bind=name ></span>
<div ng-controller="son">
<span ng-bind=name ></span>
</div>
</div>
</div>
angular.module("app",["ng"]).
controller("parent",function($scope){
$scope.name="hello";
}).
controller("son",function($scope){
console.log($scope.name);
})
在子控制器中打印name,但我们发现在这个控制器中并未为$scope添加name,于是向父作用域查找,发现父作用域存在该属性,所以可以打印出来。
$rootscope 是所有 $scope 的最上层对象,可以理解为一个 Angular 应用中的全局作用域对象。所以为$rootscope添加的属性,在所有的控制器中都可以访问得到。
2.通过事件的方式
首先介绍一下angular中的事件广播:
$on(name,handler) 注册一个事件处理函数,该函数在特定的事件被当前作用域收到(从父级或者子级作用域)时将被调用。
$emit(name,args) 向当前父作用域发送一个事件,直至根作用域。
$broadcast(name,args) 向当前作用域下的子作用域发送一个事件。
1)子向父控制器传值
<div ng-controller="parent" >
<span ng-bind=name ></span>
<div ng-controller="son">
<span ng-bind=name ng-click=callParent()></span>
</div>
</div>
</div>
angular.module("app",["ng"]).
controller("parent",function($scope){
$scope.$on('callParent', function(event,data){
$scope.name=data;
console.log(data);
});
}).
controller("son",function($scope){
$scope.name="hello";
$scope.callParent = function(){
$scope.$emit('callParent', $scope.name);
}
})
2)父向子控制器传值
<div ng-app="app">
<div ng-controller="parent" >
<span ng-bind=name ng-click=callSon()></span>
<div ng-controller="son">
<span ng-bind=name></span>
</div>
</div>
</div>
angular.module("app",["ng"]).
controller("parent",function($scope){
$scope.name="hello";
$scope.callSon = function () {
$scope.$broadcast('callSon', $scope.name);//传值
}
}).
controller("son",function($scope){
$scope.$on('callSon', function(event,data1){
$scope.name1=data1;//接受值
});
})
这种方式不可实现兄弟级传值,不过可以使用父级控制器作为中介,先由子控制器传值给父控制器,然后再由父控制器传递给另外的子控制器
3.通过服务
在angular中服务是一个单例,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。
<div ng-app="app"><div ng-controller="parent" >
<span ng-bind=name></span>
<div ng-controller="son">
<span ng-bind=name></span>
</div>
</div>
</div>
angular.module("app",["ng"]).
controller("parent",function($scope,appService){
appService.name="hi!!";
}).
controller("son",function($scope,appService){
$scope.name=appService.name;
}).
service("appService", function(){
this.name="hello";
});
通过在appService这个服务中添加对象,然后在需要用到的控制器中,通过依赖注入的方式导入该服务,在parent控制器中修改这个对象,在son中也会得到修改过后的值。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多交流和支持,点个赞呗^_^。