Angular - Binding URL Parameter to Input Text Not Working

Question

I'm trying to one-way bind a URL Parameter 'email' to the value of an input field using Angular. The desired effect is that whenever the email parameter in the URL changes, the input field will change to match the new email parameter vaue. I'm doing this in my js file:

$scope.inputEmail = $location.search()['email']

To modify the value of the input field I'm using its ng-model, 'inputEmail'. When I do this, the value of the input field is not changing when I change the URL email parameter. What am I doing wrong?

Java Gonzalez Arribas · Accepted Answer · 2017-05-30 15:24:01Z

1

Not sure if this may help bur from the Angular documentation https://docs.angularjs.org/api/ng/service/$location

// given URL http://example.com/#/some/path?foo=bar&baz=xoxo
var searchObject = $location.search();
// => {foo: 'bar', baz: 'xoxo'}

Then, for your example:

$scope.auxSearch = $location.search();
$scope.inputEmail = $scope.auxSearch.email;

And probably it could be just, not sure if this will work anyway:

$scope.inputEmail  = $location.search().email;

answered May 30, 2017 at 15:24

Java Gonzalez Arribas

215 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Groben · Accepted Answer · 2017-05-30 15:47:00Z

0

You can try this:

$scope.$on('$routeUpdate', function(){
    $scope.inputEmail = $location.search()['email']
});

Note that you HAVE to set reloadOnSearch to false on the route for $routeUpdate to be available

Otherwise you could use $rootscope:

$rootScope.$on('$locationChangeSuccess', function(event){
      $scope.inputEmail = $location.search()['email']
})

It will update the model value, when you change your query params

answered May 30, 2017 at 15:47

Groben

1,3862 gold badges10 silver badges29 bronze badges

Comments

Birdman · Accepted Answer · 2017-05-31 21:02:57Z

0

I found my problem, I forgot to include $location and it's dependencies where I defined my component controller. Thanks for the help!

answered May 31, 2017 at 21:02

Birdman

411 gold badge1 silver badge8 bronze badges

Collectives™ on Stack Overflow

Angular - Binding URL Parameter to Input Text Not Working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related