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);
注:仅个人理解及笔记,有错误的地方请各位指正!