0

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?!

lucuma
  • 18,247
  • 4
  • 66
  • 91
JohnRobertPett
  • 1,133
  • 4
  • 21
  • 36
  • 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

3 Answers3

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.

Community
  • 1
  • 1
lucuma
  • 18,247
  • 4
  • 66
  • 91
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)?

Community
  • 1
  • 1
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
0

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

  });
JohnRobertPett
  • 1,133
  • 4
  • 21
  • 36