angularJs 跨控制器與跨頁面傳值


雖然網上概括了四種或更多的傳值方式,但我現在用的順手的就兩種

首先要知道AngularJs可以構建一個單頁面應用程序,所以我划分為跨控制器傳值 和 跨頁面傳值 兩類

1、跨控制器傳值—— $rootScope

原理:所有的應用都有一個 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用於整個應用中。是各個 controller 中 scope 的橋梁。用 rootscope 定義的值,可以在各個 controller 中使用

應用:所以在跨控制器傳值時候就可以用$rootScope

案例:比如我要把控制器ControllerA中的對象,點擊事件ToB()要轉入ControllerB中調用

注:要注入$rootScope

1 app.controller('ControllerA', function ($scope, $rootScope) {
2     $scope.ToB=function(){
3        $rootScope.Model=$scope.Model;
4    }
5 });

 1 app.controller('ControllerB', function ($scope, $rootScope) { 2 $scope.ModelB=$rootScope.Model; 3 }); 

缺點:只要刷新頁面$rootScope的值就不存在了

 

2、用地址Url傳值——用$location獲得地址欄里的參數

注:要注入$location

案例1:在頁面A的Controller中

 1 $scope.goLog = function (orderServiceId) { 2 window.location.href = "#/serviceLogs?orderServiceId=" + orderServiceId; 3 } 

在頁面B中

 1 var orderServiceId = parseInt($location.search().orderServiceId); 

 

 可以用restFul風格的路徑

案例2:在頁面A的控制器中

注:要注入$routeParams

1  $scope.edit = function (role) {
2         window.location.href = "#/roles/" + role.RoleID + "/edit";
3     }

在接受參數B控制器中

1  var roleID = parseInt($routeParams.id);

 

 

注:僅個人理解及筆記,有錯誤的地方請各位指正!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM