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現在のスコープで評価する式を最初の引数として取ります。その式が新しい値を返すと、2 番目の引数である関数が新しい値で呼び出されます。したがって、

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

と言うのと基本的には同じです。

変更するたびにこの関数を呼び出しscope.readyます。

これは明らかにあなたが望むものではありません。

機能については、このようなものを実装する方法がいくつかあります。1 つ目は単純なフィルターです。

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

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

ただし、この場合、スコープでダイジェスト サイクルが実行されるたびに、返された文字列が自動的に更新されます。

タイムスタンプを 1 回だけ処理するには、次のようなディレクティブを使用できます。

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>

以下は、 3 つの例すべてを示すjsFiddleです。3 番目の例 (フィルターを使用) が毎分自動的に更新される唯一の理由は、2 番目の例 (timeagoAutoupdateディレクティブ) が を呼び出しているためであることに注意してくださいscope.$eval。

于 2012-12-05T08:53:08.673 に答える