angular中控制器(controller)之間傳遞引數的方式
在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中也會得到修改過後的值。