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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
12306验证码破解思路分享
Mar 25 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 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
php session_start()出错原因分析及解决方法
2013/10/28 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
php猜单词游戏
2015/09/29 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
List all the Databases on a SQL Server
2007/06/21 Javascript
javascript脚本调试方法小结
2008/11/24 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
javascript的几种写法总结
2016/09/30 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
Python中replace方法实例分析
2014/08/20 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
如何使用python进行pdf文件分割
2019/11/11 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
人事助理岗位职责
2013/11/18 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
怎么写自荐书范文
2014/02/12 职场文书
搞笑爱情保证书
2014/04/29 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
入党转正申请书范文
2019/05/20 职场文书
MySQL里面的子查询的基本使用
2021/08/02 MySQL
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技