Setting
based on URL string in Angular.js

Question

I am getting unidentified on my function when trying to set the <h1> based on a function using the URL string. This is my code so far, I would set it up in Plunker, but is a little awkward as there I can't replicate a URL change:

angular.module('app').controller('NavCtrl', function($scope, $location) {

  // Create <h1> based on url string

  var pageUrl = $location.url().substring(1);

  $scope.pageTitleItems = {
    feedback: "Feedback",
    settings: "Settings",
    editprofile: "Edit Profile"
  };

  $scope.$watch('$scope.location.url()', function(newValue, oldValue, $location) {

    $scope.pageTitle = $scope.pageTitleItems.pageUrl;

    console.log($scope.pagetitle);

  });

});

Does anyone know what I am doing wrong here?!

you're watching `'$scope.location.url()'`, though in the code shown, no `$scope.location` is ever defined? — Yoshi, May 16 '13 at 13:17
I see what you mean, though I have now changed that to '$scope.$location.url()', which is part of angular, so shouldn't need defining, from what I understand. — JohnRobertPett, May 16 '13 at 13:23
That's not quite correct, even though you have `$location` injected, it's still not part of your `$scope` and thus not "watchable". At the very least you would have to assign it to `$scope` like `$scope.location = $location;` and change the watch expression to something like `...$watch('location'...` (without `$scope`!), though I'd say this is really far off best practise. Try @marcoseu's answer, it's the right direction. — Yoshi, May 16 '13 at 13:53

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

You have an invalid comma:

$scope.pageTitleItems = {
    feedback: "Feedback",
    settings: "Settings",
    editprofile: "Edit Profile",  // <-- remove that comma
  };

Also, you will probably want to watch for route changes:

How to watch for a route change in AngularJS?

And finally this might help:

$rootScope.$on('$routeChangeSuccess', function(evt, cur, prev) {
    ...do what you have to do here, maybe set a $rootScope.path as you did
})

And specific to your code, you may want to define:

$scope.location = $location

so that your watch has something to watch.

edited May 23 '17 at 12:29

Community

1
1

answered May 16 '13 at 13:14

lucuma

18,247
4
66
91

Ah that is true, though still returning undefined. : ( – JohnRobertPett May 16 '13 at 13:17

score 0 · Answer 2 · edited May 23 '17 at 12:11

0

I don't think you can $watch for changes in $scope.location.url() and your best bet is use $routeChangeStart as described here. I tried to watch for $location.path() and $location.url() and they all return undefined.

If I understood you correctly, you want to set the H1 based on the URL of your current path. If that is the case, have you tried simply putting the $scope.pageTitle = $scope.pageTitleItems.pageUrl; directly in the controller (ie: outside of $scope.$watch)?

edited May 23 '17 at 12:11

Community

1
1

answered May 16 '13 at 13:24

marcoseu

3,892
2
16
35

I have got a bit further with this now, but I still get 'undefined' on using the string created from 'var pageUrl = $location.path().substring(1);', it does return the correct string, but doesn't then affect the '$scope' when using it in combination with '$scope.pageTitle = $scope.pageTitleItems.pageUrl;' – JohnRobertPett May 20 '13 at 09:08

score 0 · Accepted Answer · answered May 20 '13 at 10:19

Here is the answer for anyone who needs this functionality:

$scope.$watch(function() { return $location.path(); }, function(newValue, oldValue) {

    var pageUrl = $location.path().substring(1);

    var pageTitleItems = {
      feedback: "Feedback",
      settings: "Settings",
      editprofile: "Edit Profile"
    };

    $scope.pageTitle = pageTitleItems[pageUrl];

    console.log('page url ' + pageUrl);

    console.log('page title ' + $scope.pageTitle);  

  });

Setting based on URL string in Angular.js

based on URL string in Angular.js

3 Answers3

Setting
based on URL string in Angular.js