2

Hoping someone can help out an AngularJS noob!

I've set up a basic site with routing to change pages. All these pages have a persistent menu that interacts with the DOM to toggle classes on/off. The issue i'm having is that on initial page load, the click function works on the "Home" page, but when I navigate away to "Blog" the function stop working:

app.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when("/", {templateUrl: "partials/home.html", controller: "PageCtrl"})
    .when("/blog", {templateUrl: "partials/blog.html", controller: "PageCtrl"})
}]);

app.controller('PageCtrl', function (/* $scope, $location, $http */) {
  $('#works-navigation .navigation-label').click(function () {
    $('body').toggleClass('show-works-navigation');
  });
});

Any ideas?!

Anthony
  • 123
  • 2

1 Answers1

0

That jQuery listener is attached to a single element which disappears or gets refreshed when Angular navigates. Either use .on() listeners which work for dynamically added elements, or simply drop jQuery and do it the Angular-way.

jQuery way with delegated handler :

$("#works-navigation ").on("click", ".navigation-label", function() {
    $('body').toggleClass('show-works-navigation');
});

A more Angularized way

This is easily done using a $rootScope variable (sWN in the example) to control the body class. So, for start, add ng-class to the body: 

<body ng-class="{'show-works-navigation': sWN}">

Then on your .navigation-label element add ng-click: 

<div class="navigation-label" ng-click="$root.sWN = !$root.sWN"></div>

This will flip the value of our rootScope variable sWN, which we use to trigger the body class.

You can also do this without the rootScope, but since you're triggering a class on the body element, I think it's the safest way.

Shomz
  • 37,421
  • 4
  • 57
  • 85
  • Thanks Shomz, can you point me in the direction on doing it the Angular-way? The line you supplied didn't work, still getting the same issues on page change... – Anthony Sep 26 '14 at 00:23
  • No problem. So wait, is blog a separate controller? If so, that's why it's not working - it's no longer there. I'll write you an example with a more Angular way. – Shomz Sep 26 '14 at 00:30
  • No, currently i'm only using "PageCtrl" as the only controller for both pages. – Anthony Sep 26 '14 at 00:33
  • Yeah, silly me, didn't read the first block of your code. Hm, then the delegated approach should work. It might sound stupid, but do you have `#works-navigation .navigation-label` on your blog page? – Shomz Sep 26 '14 at 01:10
  • Thank you so much! That was much more straight forward than trying to figure out a jQuery workaround... It totally works!!! – Anthony Sep 26 '14 at 03:37
  • You're welcome! Yes, you just need to change the way of thinking a little bit (from the plain JS/jQ way) and you'll be suprised how many wonderful things you can achieve with just a few lines of Angular code. :) You have some great ideas here: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background – Shomz Sep 26 '14 at 11:03