CODEWITHSUNDEEP
javascriptangularjsurlget
J. Doe
J. Doe

Reputation: 75

Angular - getting GET variable using $location

I'm tring to get a GET var from the url using Angular $location.search() but it didn't work.

This is the code:

jsfiddle

and this is the GET

var app = angular.module('myApp',[]);

app.controller('odinvite', function ($scope, $location)
    {
        //$scope.mytry = 5;
        $scope.mytry =$location.search().username;
    }
);

What's the problem? There is other way besides?

thanks!

EDIT -
I tried to add manually hash to the url like this - "mydomain.com/foo.php#?username=7" and it worked! But I don't to add hash every time and I want the $location to grab it automatically.

I also tried to add this - 

 app.config(['$locationProvider', function($locationProvider) {
        $locationProvider.html5Mode(true);
    }]);

to solve it but it gave me an error - 

Error: [$location:nobase] http://errors.angularjs.org/1.4.8/$location/nobase
    at angular.js:38
    at hf.$get (angular.js:12196)
    at Object.e [as invoke] (angular.js:4523)
    at angular.js:4340
    at d (angular.js:4482)
    at Object.e [as invoke] (angular.js:4514)
    at M.instance (angular.js:9182)
    at D (angular.js:8299)
    at g (angular.js:7731)
    at angular.js:7611
(anonymous) @ angular.js:12520
(anonymous) @ angular.js:9292
$apply @ angular.js:16157
(anonymous) @ angular.js:1679
e @ angular.js:4523
c @ angular.js:1677
yc @ angular.js:1697
Zd @ angular.js:1591
(anonymous) @ angular.js:29013
b @ angular.js:3057
If @ angular.js:3346
d @ angular.js:3334

Upvotes: 2

Views: 453

Answers (2)

Sravan
Sravan

Reputation: 18647

Your example is working with the second link. It will not work with the first link because the fiddle link https://jsfiddle.net/bar2o6gf/3/ does not contain a username

so, I mocked the url using,'url' property of $location

$location.url('http://fiddle.jshell.net/bar2o6gf/3/show/light/?username=7');

Here is the code,

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <head>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="myApp" ng-controller="odinvite">
      <div>
        <br />
        <br />

      $location.url() = {{location.url()}}<br />
      $location.search() = {{loc1}}<br />
      keyword valus is  {{mytry}}
  </div>
  {{mytry}}
    </div>
  
<script>
var app = angular.module('myApp',[]);

app.controller('odinvite', function ($scope, $location)
    {
        //$scope.mytry = 5;
        
        $scope.location = $location;
      $location.url('http://fiddle.jshell.net/bar2o6gf/3/show/light/?username=7');
  $scope.loc1 = $location.search() ;    
    if($location.url().indexOf('username') > -1){    
        $scope.mytry= $location.search().username ;    
               
    }
  
    }
);

</script>

</body>
</html>

Here is a DEMO

Upvotes: 1

Joshua J Wilborn
Joshua J Wilborn

Reputation: 526

This is an issue with JS Fiddle and the way query string properties work with iFrames. See here: How to pass GET parameters to jsFiddle

Upvotes: 0

Related Questions