pull to refresh inside directive AngularJS using iScroll

Question

edit: i update the code block as i make changes and the errors at the bottom

so i am inside my directive. I want to do a refresh of the page. (like after a scroll to refresh)

What's the right angular way to do this, in angular? (I can hack it in with jquery but i am trying to do things the angular way)

my plan was to get the url i am currently at. And then set the $location.path(my current url);

it doesn't work because i cant seem to figure out what my current url is.

// USAGE: <div alert-bar alertMessage="myMessageVar"></div>
angular.module('foo.directives').
directive('iScroll', ['$rootScope', '$parse', '$location', function($rootScope, $parse,    $location) {
   return {
   restrict: 'C',

link: function(scope, elem, attrs) {
  console.log("iscroll!");

 //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

 new iScroll('wrapper', { useTransition: false, bounce:true, vScroll:true,
  onScrollEnd: function ($location) {
    console.log("onScrollEnd");
    //x=$location.path();


      x=$location.url();
    console.log("url is "+x);

  },
} );
   }
}
}]);

now yields

Uncaught TypeError: Cannot call method 'url' of undefined

       // USAGE: <div alert-bar alertMessage="myMessageVar"></div>
        angular.module('foo.directives').
       directive('iScroll', ['$rootScope', '$parse', '$location', function($rootScope, $parse,    $location) {
   return {
   restrict: 'C',

link: function(scope, elem, attrs) {
  console.log("iscroll!");

 //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

 new iScroll('wrapper', { useTransition: false, bounce:true, vScroll:true,
  onScrollEnd: function ($location) {
    console.log("onScrollEnd");
    //x=$location.path();


      x=$location.path();
    console.log("path is "+x);

  },
} );
   }
}
}]);

now yields

Uncaught TypeError: Cannot call method 'path' of undefined

Answer 1

In your directive definition, $location is injected into $parse and $parse into $location.

The object in your log is $parse (from angular source):

$parse = function(exp) {
  switch(typeof exp) {
    case 'string':
      return cache.hasOwnProperty(exp)
        ? cache[exp]
        : cache[exp] =  parser(exp, false, $filter, $sniffer.csp);
    case 'function':
      return exp;
    default:
      return noop;
  }
};

This should work :

angular.module('foo.directives').directive('iScroll', ['$rootScope', '$parse', '$location', function($rootScope, $parse, $location) {
  return {
    restrict: 'C',
    link: function(scope, elem, attrs) {
      new iScroll('wrapper', { useTransition: false, bounce:true, vScroll:true,
        onScrollEnd: function () {
          console.log("onScrollEnd");
          console.log("url is " + $location.url());
        },
      });
    }
  }
}]);

Answer 2

So it turns out i figured out how to do this. getting your current location & then setting the location.path() to the same spot is a pretty poor refresh.

what i did was write a refresh function in one of my controllers

    $scope.refresh = function() {

  return Headlines.get(queryId).then( function( headlines ) {
   // modify the view of the page you wanted to refresh here by updating your data 
  });

and then revamp my directive to just call that refresh function . NOTE: you need the scope.$apply(function() { } around the refresh function otherwise it will only happen after iscroll is done manipulating the page.

angular.module('foo.directives').directive('iScroll', ['$rootScope', '$parse', '$location', function($rootScope, $parse, $location) {
  return {
  restrict: 'C',

link: function(scope, elem, attrs) {
  console.log("iscroll!");

  document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

  new iScroll('wrapper', { useTransition: false, bounce:true, vScroll:true,
    onScrollEnd: function ($location) {
      console.log("onScrollEnd");


   scope.$apply(function() {
     scope.refresh();
   });

     },
    });
   }
  }        
}]);