1

我正在尝试基于 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 还没有完成它的事情......我确定这很简单，我只是不知道用谷歌搜索它的正确词.

4

1 回答 1

5

我不确定这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>

这是一个演示所有三个示例的 jsFiddle。请注意，第三个示例（使用过滤器）每分钟自动更新的唯一原因是因为第二个示例（timeagoAutoupdate指令）正在调用scope.$eval.

于 2012-12-05T08:53:08.673 回答