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 相关文章推荐
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 Javascript
vue使用element-ui按需引入
May 20 Vue.js
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
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
原生js调用json方法总结
2018/02/22 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
python配置grpc环境
2019/01/01 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
python logging.info在终端没输出的解决
2020/05/12 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
《我的第一本书》教学反思
2014/02/15 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
Django migrate报错的解决方案
2021/05/20 Python
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers