angularJs 跨控制器与跨页面传值
虽然网上概括了四种或更多的传值方式,但我现在用的顺手的就两种
首先要知道AngularJs可以构建一个单页面应用程序,所以我划分为跨控制器传值 和 跨页面传值 两类
1、跨控制器传值—— $rootScope
原理:所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用
应用:所以在跨控制器传值时候就可以用$rootScope
案例:比如我要把控制器ControllerA中的对象,点击事件ToB()要转入ControllerB中调用
注:要注入$rootScope
app.controller('ControllerA', function ($scope, $rootScope) {
$scope.ToB=function(){
$rootScope.Model=$scope.Model;
}
});
app.controller('ControllerB', function ($scope, $rootScope) { $scope.ModelB=$rootScope.Model; });
缺点:只要刷新页面$rootScope的值就不存在了
2、用地址Url传值——用$location获得地址栏里的参数
注:要注入$location
案例1:在页面A的Controller中
$scope.goLog = function (orderServiceId) { window.location.href = "#/serviceLogs?orderServiceId=" + orderServiceId; }
在页面B中
var orderServiceId = parseInt($location.search().orderServiceId);
可以用restFul风格的路径
案例2:在页面A的控制器中
注:要注入$routeParams
$scope.edit = function (role) {
window.location.href = "#/roles/" + role.RoleID + "/edit";
}
在接受参数B控制器中
var roleID = parseInt($routeParams.id);
注:仅个人理解及笔记,有错误的地方请各位指正!
angularJs 跨控制器与跨页面传值的更多相关文章
- 【2017-05-21】WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性、Js中getAttribute和超链接点击弹出警示框。
一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key= ...
- WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性和超链接点击弹出警示框
一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值方式: href="地址?key=v ...
- 跨页面传值之QueryString
跨页面传值常用方法 1.QueryString 2.Form-post控件传递 3.Cookies传递 4.Application传递 5.Session传递(灵活强大) 1.query传值 http ...
- 【页面传值6种方式】- 【JSP 页面传值方法总结:4种】 - 【跨页面传值的几种简单方式3种】
阅读目录 1. URL 链接后追加参数 2. Form 3. 设置 Cookie 4. 设置 Session JSP 页面间传递参数是项目中经常需要的,这应该算是 web 基本功吧. 试着将各种方式总 ...
- mui框架开发aop的跨页面传值
mui开发跨平台app,其实不乏会涉及到跨页面传值,今天给大家简单介绍一种常用也是简单的传值方法 咱在这里设置一个场景,就是两个页面进入到同一页面展示不同的元素,此时需要在这两个页面各自设置一个区别的 ...
- ASP.NET跨页面传值技巧[总结]
个人网站:http://www.51pansou.com .net视频下载:.net视频教程 .net源码下载:.net源码 关于页面传值的方法,我就我个人观点做了些总结,希望对大家有所帮助. 1. ...
- AngularJs最简单解决跨域问题案例
AngularJs最简单解决跨域问题案例 2016-05-20 09:18 82人阅读 评论(0) 收藏 举报 分类: javascript(1) 作者:白狼 出处:http://www.mank ...
- ThinkPHP中的跨控制器调用与框架执行流程
一.跨控制器调用 UserController.class.php <?php namespace Home/Controller use Think/Controller class User ...
- [转]html5: postMessage解决跨域和跨页面通信的问题
[转]html5: postMessage解决跨域和跨页面通信的问题 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = wi ...
随机推荐
- DP---(POJ1159 POJ1458 POJ1141)
POJ1159,动态规划经典题目,很适合初学者入门练手. 求:为了使字符串左右对称,应该插入的最小字符数目. 设字符串为S1 S2 S3 - Sn. 这个字符串有n个字符,根据DP的基本思路,减少问题 ...
- lintcode-120-单词接龙
120-单词接龙 给出两个单词(start和end)和一个字典,找到从start到end的最短转换序列 比如: 每次只能改变一个字母. 变换过程中的中间单词必须在字典中出现. 注意事项 如果没有转换序 ...
- lintcode-464-整数排序 II
464-整数排序 II 给一组整数,按照升序排序.使用归并排序,快速排序,堆排序或者任何其他 O(n log n) 的排序算法. 样例 给出 [3, 2, 1, 4, 5], 排序后的结果为 [1, ...
- cli 中php的配置和phpinfo不一样
这是因为加载的php.ini的路径不一样 可以通过查看 php -i | grep php.ini 来确定两个加载的配置路径是一样的 win中没有grep的命令,可以把php -i 的内容重定向输出到 ...
- 有一个集合,判断集合里有没有“world”这个元素,如果有,添加“javaee”
// 有一个集合,判断集合里有没有“world”这个元素,如果有,添加“javaee” List list = new ArrayList(); list.add("world") ...
- mysql中联合查询
联合查询union 一个翻译问题的解释: 在mysql的手册中,将连接查询(Join)翻译为联合查询: 而联合查询(union),没有明确翻译. 但: 在通常的书籍或文章中,join被翻译为“连接”查 ...
- kafka 基础知识梳理-kafka是一种高吞吐量的分布式发布订阅消息系统
一.kafka 简介 今社会各种应用系统诸如商业.社交.搜索.浏览等像信息工厂一样不断的生产出各种信息,在大数据时代,我们面临如下几个挑战: 如何收集这些巨大的信息 如何分析它 如何及时做到如上两点 ...
- app耗电量测试工具--PowerTutor
PowerTutor是一款用来测试手机功耗的小工具,它可以只管地展示手机系统主要的组件和各种用户app产生的功耗数据.它可以统计app的屏幕功耗(LCD).CPU功耗以及WiFi和3G网络功耗,我们可 ...
- DateTime Toxxx() 方法获取时间
直接上代码 static void Main(string[] args) { DateTime time = DateTime.Now; Console.WriteLine("ToFile ...
- CSS自适应导航菜单
以下是一个简单实例,可以通过学习了解响应工菜单的制作. html <nav class="nav"> <ul> <li class="cur ...