angularJS1 url中携带参数的获取方法


Posted in Javascript onOctober 09, 2018

index.html 从此界面跳转到a.html界面

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>form demo</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <script src="js/angular.min.1.6.0.js"></script>
  </head>

  <body ng-app="app" ng-controller="myctrl">

    <button ng-click="jump()" >点击跳转下一页</button>
    <br /><br />
    <a ng-href="a.html?name=xie&age=25&gender=nv" rel="external nofollow" >点击跳转下一页</a>
    </div>
  </body>

  <script>
    var app = angular.module('app', []);
    app.controller('myctrl', function($scope, $window) {
      $scope.jump = function() {
        $window.location.href = 'a.html?name=xie&age=25&gender=nv';
      }
    });
  </script>

</html>

a.html 跳转到的目标界面,在此界面获取url携带的参数:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <script src="js/angular.min.1.6.0.js"></script>
    <title></title>
  </head>
  <body ng-app="myapp" ng-controller="myctrl" >
    <p>a.html</p>


  </body>
  <script>
  //Url="http://168.33.222.69:8020/angularjs_demo/a.html?name=xie&age=25&gender=nv";
    var app=angular.module("myapp",[]);
    app.config(['$locationProvider', function($locationProvider) { 
     // $locationProvider.html5Mode(true); 
     $locationProvider.html5Mode({
     enabled: true,
     requireBase: false
    });
    }]);


    app.controller('myctrl', function($scope, $location) {


     console.log($location.search().name);
     console.log($location.search().age);
     console.log($location.search().gender);

    }); 

//打印结果:
//[Web浏览器] "xie" 
//[Web浏览器] "25" 
//[Web浏览器] "nv" 


  </script>
</html>

以上这篇angularJS1 url中携带参数的获取方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于jQuery的inArray 方法介绍
Oct 08 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
原生JS实现pc端轮播图效果
Dec 21 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 #Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 #Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 #Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 #Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 #Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 #Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 #Javascript
You might like
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
php实现文件上传基本验证
2020/03/04 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
Python类继承和多态原理解析
2020/02/05 Python
在pycharm中实现删除bookmark
2020/02/14 Python
在python3中实现更新界面
2020/02/21 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
几个Linux面试题笔试题
2012/12/01 面试题
大学生职业生涯规划书汇总
2014/03/20 职场文书
小学生操行评语大全
2014/04/22 职场文书
团委竞选演讲稿
2014/04/24 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
工作岗位职责范本
2015/02/15 职场文书
个人年终总结开头
2015/03/06 职场文书
幼儿园教师求职信
2015/03/20 职场文书
司机岗位职责范本
2015/04/10 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android