Using AngularJS directives when scope is not loaded yet

Question

Using AngularJS directives when scope is not loaded yet

I'm trying to implement a simple directive based on the jQuery timeago plugin. Here is the code for the directive (well, as far as I've gotten so far)

<small timeago milliseconds="{{conversation.timestamp}}"></small>

I am trying to use the timestamp (in milliseconds), and let angularJs bind the timeago() function like this..

App.Directives.directive('timeago', function() {

    return {
        restrict: 'A',
        replace: false,
        scope: false,
        link: function (scope, element, attrs) {

            scope.$watch('ready', function () {

                var x = attrs['milliseconds'];

                alert(x);

                $(element).timeago();

            });
        },
    };

});

It works just fine when I manually set the value of milliseconds, but it seems the $scope hasn't done it's thing yet... I'm sure this is something simple, I just don't know the right words to google it.

angularjs

Answer 1

I'm not sure that scope.$watch does what you are expecting it to do; scope.$watch takes as its first argument an expression to evaluate on the current scope; when that expression returns a new value, it will call the second argument, a function, with the new value. Thus,

scope.$watch('ready', function() {...});

is basically the same as saying

Call this function every time scope.ready changes.

which is obviously not what you want.

On to your functionality--there are a few ways you might go about implementing something like this. The first is a simple filter:

app.filter('timeago', function() {
  return function(time) {
    if(time) return jQuery.timeago(time);
    else return "";
  };
});

<p>The timestapm was {{conversation.timestamp|timeago}} ago.</p>

In this case, however, the returned string would automatically refresh any time a digest cycle is run on the scope.

To only process the timestamp exactly once, you might use a directive like the following:

app.directive('timeago', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
      scope.$watch(attrs.timeago, function(value) {                
        if(value) elem.text(jQuery.timeago(value));
      });
    }
  };
});

<p>The timestamp was <span timeago="conversation.timestamp"></span> ago.</p>

Here is a version that re-runs a digest cycle every 15 seconds, to automatically update the timestamp every so often:

app.directive('timeago', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
      var updateTime = function() {
        if (attrs.timeagoAutoupdate) {
          var time = scope.$eval(attrs.timeagoAutoupdate);
          elem.text(jQuery.timeago(time));
          $timeout(updateTime, 15000);
        }
      };
      scope.$watch(attrs.timeago, updateTime);
    }
  };
});

<p>The timestamp was <span timeago="conversation.timestamp"></span> ago.</p>

Here is a jsFiddle that demonstrates all three examples. Do note that the only reason the third example (with the filter) is automatically updating every minute is becaues the second example (the timeagoAutoupdate directive) is calling scope.$eval.