• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJS利用Controller完成URL跳转

AngularJS利用Controller完成URL跳转

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angularjs controller,angularjs url,angularjs获取url,angularjs,angularjs视频教程等相关知识,希望在学习及工作中可以帮助到您

具体写法举例:

1.js定义一个controller

function MyCtrl($scope, $location) {

  $scope.jumpToUrl = function(path) {

    //TODO:add code here

  };

}
</div>

2.html里面应用controller

<div ng-controller=‘MyCtrl'>

  <button ng-click="jumpToUrl('/signin')">signin</button>

</div>
</div>

3.controller里面TODO的位置填入

$location.path(path);
</div>

然后运行起来就可以看效果了。

假设当前页面的url是:http://127.0.0.1:8080/#/home

$location.path(path);执行后就会跳到http://127.0.0.1:8080/#/signin

如果你发现页面不能正常跳转,可以在$location.path(path);后面再加上一句

var curUrl = $location.absUrl(); //用来显示url全路径
</div>

调试跟踪页面时查看curUrl的值到底变成多少,大概就能猜出问题出在哪了。

好了,以上就是在AngularJS利用Controller完成URL跳转的全部内容,希望本文对大家学习AngularJS有所帮助。

</div>

您可能想查找下面的文章:

  • 详解AngularJS controller调用factory
  • AngularJS Controller作用域
  • AngularJS控制器controller给模型数据赋初始值的方法
  • Angularjs的Controller间通信机制实例分析
  • Angularjs中controller的三种写法分享
  • AngularJS利用Controller完成URL跳转

相关文章

  • 2017-05-30详解Angualr 组件间通信
  • 2017-05-30AngularJs实现分页功能不带省略号的代码
  • 2017-05-30AngularJS入门教程之更多模板详解
  • 2017-05-30Angularjs中controller的三种写法分享
  • 2017-05-30AngularJS ng-repeat数组有重复值的解决方法
  • 2017-05-30AngularJS仿苹果滑屏删除控件
  • 2017-05-30angularjs中ng-bind-html的用法总结
  • 2017-05-30Angularjs的Controller间通信机制实例分析
  • 2017-05-30浅谈angularJS 作用域
  • 2017-05-30详细分析使用AngularJS编程中提交表单的方式

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • AngularJS身份验证的方法
    • angular分页指令操作
    • Angualrjs和bootstrap相结合实现数据表格table
    • AngularJS中update两次出现$promise属性无法识别的解决方法
    • AngularJS之页面跳转Route实例代码
    • AngularJS自定义指令之复制指令实现方法
    • 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
    • ionic+AngularJs实现获取验证码倒计时按钮
    • AngularJS的表单使用详解
    • 利用Angularjs和bootstrap实现购物车功能

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有