angularJS1 url中攜帶參數(shù)的獲取方法

更新時(shí)間：2018年10月09日 09:45:51 作者：xiejunna

今天小編就為大家分享一篇angularJS1 url中攜帶參數(shù)的獲取方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

index.html 從此界面跳轉(zhuǎn)到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()" >點(diǎn)擊跳轉(zhuǎn)下一頁</button>
    <br /><br />
    <a ng-href="a.html?name=xie&age=25&gender=nv" rel="external nofollow" >點(diǎn)擊跳轉(zhuǎn)下一頁</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 跳轉(zhuǎn)到的目標(biāo)界面，在此界面獲取url攜帶的參數(shù)：

<!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);

    }); 

//打印結(jié)果：
//[Web瀏覽器] "xie" 
//[Web瀏覽器] "25" 
//[Web瀏覽器] "nv" 


  </script>
</html>

以上這篇angularJS1 url中攜帶參數(shù)的獲取方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJS發(fā)送異步Get/Post請(qǐng)求方法
今天小編就為大家分享一篇AngularJS發(fā)送異步Get/Post請(qǐng)求方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Angular中SASS樣式的詳細(xì)使用教程
對(duì)于一個(gè)Sass用戶,只需要理解Sass擴(kuò)展部分如何工作的,就能完全理解SCSS,下面這篇文章主要給大家介紹了關(guān)于Angular中SASS樣式的詳細(xì)使用教程,需要的朋友可以參考下
2022-05-05
AngularJs 彈出模態(tài)框（model）
這篇文章主要介紹了AngularJs 彈出模態(tài)框（model）的相關(guān)資料,需要的朋友可以參考下
2016-04-04
AngularJS實(shí)現(xiàn)的生成隨機(jī)數(shù)與猜數(shù)字大小功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的生成隨機(jī)數(shù)與猜數(shù)字大小功能,結(jié)合完整實(shí)例形式分析了AngularJS隨機(jī)數(shù)生成與數(shù)值判定相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
體驗(yàn)jQuery和AngularJS的不同點(diǎn)及AngularJS的迷人之處
AngualrJS是一個(gè)很貼心的web應(yīng)用框架，本篇通過jQuery和Angular兩種方式來實(shí)現(xiàn)同一個(gè)實(shí)例，從而體驗(yàn)兩者的不同點(diǎn)以及AngularJS的迷人之處
2016-02-02
angular.js分頁代碼的實(shí)例
本文用實(shí)例詳細(xì)給大家展示了angular.js分頁代碼，代碼很詳細(xì)，感興趣的小伙伴們可以參考一下
2016-07-07
整理AngularJS中的一些常用指令
這篇文章主要介紹了整理AngularJS中的一些常用指令,包括ng-app、ng-init、ng-model和ng-repeat這四個(gè)指令的講解,需要的朋友可以參考下
2015-06-06
詳解AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn)
本篇文章主要介紹了AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-04-04
angularJS深拷貝詳解
本篇文章主要介紹了angularJS深拷貝，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-03-03
AngularJS 視圖詳解及示例代碼
本文主要介紹AngularJS 視圖，這里整理了相關(guān)知識(shí)，并附代碼示例和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下
2016-08-08