angularJs 跨控制器与跨页面传值

最新推荐文章于 2018-12-10 20:29:00 发布

weixin_30535913

最新推荐文章于 2018-12-10 20:29:00 发布

阅读量123

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zfdcp-028/p/5781122.html

本文介绍了AngularJS中两种常见的数据传递方法：利用$rootScope实现跨控制器的数据共享和通过URL参数进行页面间的数据传递。前者适用于同一应用内不同控制器间的通信，后者则适合页面跳转时的数据携带。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

虽然网上概括了四种或更多的传值方式，但我现在用的顺手的就两种

首先要知道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);

注：仅个人理解及笔记，有错误的地方请各位指正！

转载于:https://www.cnblogs.com/zfdcp-028/p/5781122.html