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 相关文章推荐
JS中处理与当前时间间隔的函数代码
May 23 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
JavaScript基础之this详解
Jun 04 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 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字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
基于jquery的表格排序
2010/09/11 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
详解如何利用Cython为Python代码加速
2018/01/27 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
Python 绘制可视化折线图
2020/07/22 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
连锁酒店店长职责范本
2014/02/13 职场文书
立志成才演讲稿
2014/09/04 职场文书
创优争先心得体会
2014/09/11 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
家庭经济困难证明
2015/06/23 职场文书
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android