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源码解读之addClass()方法分析
Feb 20 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
JavaScript手机振动API
Jun 11 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 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
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
php函数指定默认值方法的小例子
2013/12/04 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
深入理解python中的select模块
2017/04/23 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
Python实现按中文排序的方法示例
2018/04/25 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
法律专业应届生自荐信范文
2014/01/06 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
英语复习计划
2015/01/19 职场文书
执行力心得体会范文
2016/01/11 职场文书
Django操作cookie的实现
2021/05/26 Python
Linux磁盘管理方法介绍
2022/06/01 Servers