AngularJS路由问题解决

遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去。再加一层地址解决了,但是后来发现问题还是来了:

Could not resolve 'yhDtlMaintain/yhdetail' from state 'yhMaintain'

药店详情          http://192.168.1.118:8088/lmapp/index.html#/0

优惠券详情      http://192.168.1.118:8088/lmapp/index.html#/0

优惠活动详情  http://192.168.1.118:8088/lmapp/index.html#/index/0

经过url的对比,自己发现了问题。其中药店详情和优惠券详情的url是相同的。而之前自己在优惠活动详情中改动了一下,结果正常显示。然后自己接着查看优惠活动的修改地方,发现:

/*--------------------------优惠活动详情维护--------------------------*/

.state('yhhdDtlMaintain', {

url: '/index/{yhid}',

views: { //注意这里的写法,当一个页面上带有多个ui-view的时候如何进行命名和视图模板的加载动作

'': {

templateUrl: 'rightInfoList.html'

},

'sys_banner@yhhdDtlMaintain': {

templateUrl: 'sys_banner.html'

},

'rightContent@yhhdDtlMaintain': {

templateUrl: function($stateParams){

console.log("YHID:");

console.log($stateParams);

return 'yh_set_dtl.html';

}

}

}

})

玄机藏在url中,其实这个url是在浏览器中访问的url,基于用户浏览该应用所在的状态。同理,自己修改了优惠券详情的路由,如下:

/*-----------------------------优惠券详情维护-----------------------------*/

.state('yhqDtlMaintain', {

url: '/yhqIndex/{yhid}',

views: { //注意这里的写法,当一个页面上带有多个ui-view的时候如何进行命名和视图模板的加载动作

'': {

templateUrl: 'rightInfoList.html'

},

'sys_banner@yhqDtlMaintain': {

templateUrl: 'sys_banner.html'

},

'rightContent@yhqDtlMaintain': {

templateUrl: function($stateParams){

console.log("YHQID:");

console.log($stateParams);

return 'yh_set_dtl.html';

}

}

}

})

这样所有的问题就迎刃而解了。但自己还是需要深入理解一下相关原理。若之前不做修改的话,优惠券详情的url就会与药店详情相同,药店详情页面覆盖了优惠券详情页面。

AngularJS进阶(二)AngularJS路由问题解决的更多相关文章

  1. AngularJS进阶(二十七)实现二维码信息的集成思路

    AngularJS实现二维码信息的集成思路        赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,与君共勉!      注:点击此处进行知识充电 ...

  2. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  3. AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储

    AngularJS项目开发技巧之localStorage存储       注: localStorage深度学习 绪 项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStora ...

  4. AngularJS进阶(二十四)AngularJS与单选框及多选框的双向动态绑定

    AngularJS与单选框及多选框的双向动态绑定      赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! AngularJS 在 <in ...

  5. AngularJS进阶(二十二)实现时间选择插件

    JS实现时间选择插件 引导语 在项目开发过程中,需要实现根据以日期为筛选条件之一,故需要实现时间选择插件.对于未接触的新事物,自己总是感觉不明觉厉.其实,有些实现可以使用很简单的方法即可.以此为例,偶 ...

  6. AngularJS进阶(二十一)Angularjs中scope与rootscope区别及联系

    Angularjs中scope与rootscope区别及联系 scope是html和单个controller之间的桥梁,数据绑定就靠他了.rootscope是各个controller中scope的桥梁 ...

  7. AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题

    解决AngualrJS页面刷新导致异常显示问题 绪 俗话说,细节决定成败,编程亦是如此.编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的地方.今略举一例,与君共 ...

  8. AngularJS进阶(二十六)实现分页操作

    JS实现分页操作 前言 项目开发过程中,进行查询操作时有可能会检索出大量的满足条件的查询结果.在一页中显示全部查询结果会降低用户的体验感,故需要实现分页显示效果.受前面"JS实现时间选择插件 ...

  9. AngularJS进阶(二十三)ANGULAR三宗罪之版本陷阱

    ANGULAR三宗罪之版本陷阱 坑!碰到个大坑,前面由于绑定日期时将angular版本换为angular-1.3.0-beta.1时,后来午睡后,登录系统,发现无论如何都登陆不进去了,经过调试,发现数 ...

随机推荐

  1. Android图表库MPAndroidChart(二)——线形图的方方面面,看完你会回来感谢我的

    Android图表库MPAndroidChart(二)--线形图的方方面面,看完你会回来感谢我的 在学习本课程之前我建议先把我之前的博客看完,这样对整体的流程有一个大致的了解 Android图表库MP ...

  2. popupwindow中EditText获取焦点后自动弹出软键盘

    关于popupwindow中EditText获取焦点后自动弹出软键盘的问题,玩过手机qq或空间的童鞋应该知道,再点击评论时会弹出一个编辑框,并且伴随软键盘一起弹出是不是很方便啊,下面我们就来讲一下实现 ...

  3. 漏洞挖局利器-Fuzz技术介绍

    模糊测试的定义 模糊测试定义为"通过向应用提供非预期的输入并监控输出中的异常来发现软件中的故障(faults)的方法". 典型而言,模糊测试利用自动化或是半自动化的方法重复地向应用 ...

  4. 在O(1)时间内删除单链表结点

    给定单链表的一个结点的指针,同时该结点不是尾结点,此外没有指向其它任何结点的指针,请在O(1)时间内删除该结点. int deleteNode(LNode **head, LNode **node) ...

  5. Android必知必会-Fragment监听返回键事件

    如果移动端访问不佳,请尝试 Github版<–点击左侧 背景 项目要求用户注册成功后进入修改个人资料的页面,且不允许返回到上一个页面,资料修改完成后结束当前页面,进入APP主页. 由于是使用多个 ...

  6. Android初级教程:Android中解析方式之pull解析

    在安卓中有很多种解析方式.按照大方向有xml解析和json解析.而,细致的分,xml和json解析各有自己的很多解析方式.今天这一篇主要介绍xml解析中的pull解析.对于xml的解析方式,我之前在j ...

  7. 高性能nosql ledisdb设计与实现 (2):replication

    ledisdb现在已经支持replication机制,为ledisdb的高可用做出了保障. 使用 假设master的ip为10.20.187.100,端口6380,slave的ip为10.20.187 ...

  8. CUDA学习,环境配置和简单例子

    根据摩尔定律,每18个月,硬件的速度翻一番.纵使CPU的主频会越来越高,但是其核数受到了极大的限制,目前来说,最多只有8个或者9个核.相比之下,GPU具有很大的优势,他有成千上万个核,能完成大规模的并 ...

  9. 【一天一道LeetCode】#88. Merge Sorted Array

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given t ...

  10. hadoop队列管理(指定queue跑程序)

    hadoop 升级到cdh5后,队列管理被取消,而是统一用资源池分配. hadoop2.0版本,Hadoop采用了平级队列组织方式,,管理员可将用户分到若干个扁平队列中,在每个队列中,可指定一个或几个 ...