Question

我正在尝试基于jQuery timeago插件实现一个简单的指令。这是指令的代码（好吧，就我迄今为止所做的那样）

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

我正在尝试使用时间戳（以毫秒为单位），并让angularJs像这样绑定timeago（）函数..

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

            });
        },
    };

});

当我手动设置毫秒的值时，它工作得很好，但似乎$ scope尚未完成它...我确信这很简单，我只是不知道正确的单词谷歌吧。

Answer 1

我不确定scope.$watch能做出你期望它做的事情; scope.$watch将第一个参数作为评估当前范围的表达式;当该表达式返回一个新值时，它将使用新值调用第二个参数，即函数。因此，

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

与说

基本相同

每次scope.ready更改时都调用此函数。

这显然不是你想要的。

关于您的功能 - 您可以通过几种方式实现这样的功能。第一个是简单的过滤器：

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

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

但是，在这种情况下，只要在作用域上运行摘要周期，返回的字符串就会自动刷新。

要仅处理时间戳一次，您可以使用如下指令：

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>

这是一个每15秒重新运行一个摘要周期的版本，每隔一段时间自动更新一次时间戳：

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演示了所有三个例子。请注意，第三个示例（使用过滤器）每分钟自动更新的唯一原因是第二个示例（timeagoAutoupdate指令）正在调用scope.$eval。

尚未加载范围时使用AngularJS指令

1 个答案: