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的一个图片hover的插件
Apr 24 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
AngularJS入门教程(零):引导程序
Dec 06 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
vue2.x 对象劫持的原理实现
Apr 19 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好代码风格的阶段性总结
2016/06/25 PHP
Symfony查询方法实例小结
2017/06/28 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
node网页分段渲染详解
2016/09/05 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
寻找网站后台地址的python脚本
2014/09/01 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
在Python中表示一个对象的方法
2019/06/25 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
办公室内勤岗位职责范本
2013/12/09 职场文书
车间副主任岗位职责
2013/12/24 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
春节慰问信范文
2015/02/15 职场文书
家装业务员岗位职责
2015/04/03 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
安全第一课观后感
2015/06/18 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android