0

私は AngularJS と moment.js を使用して、json データが読み込まれた後に時刻をフォーマットしようとしています。$watch を使用して $scope.comments を監視しましたが、$watch が 3 つのイベント (からの結果セット) を認識した理由がわかりません。 json には、予想どおり 1 回ではなく、3 つのアイテムが含まれています。console.lof('changed') が 3 回実行されました

var MyApp = angular.module('MyApp', ['ng', 'commentController']);
MyApp.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
        when('', {
            templateUrl: '/partials/comment-list.html',
            controller: 'CommentListCtrl'
        });
    }
]);

MyApp.directive("timeago", function () {
    return function ($scope, element, attrs) {
        $scope.$watch("comments", function () {
            $('.timeago').each(function (index) {
                console.log('chaneged');
                $(this).removeClass('timeago');
                var time = moment($(this).text());
                //console.log(time.fromNow());
                $(this).text(time.fromNow());
            })
        });
    };
});

/* Controllers */
var commentController = angular.module('commentController', []);
commentController.controller('CommentListCtrl', function CommentListCtrl($http, $scope) {
    $scope.comments = [];

    $http.get('/api/json?n=3').success(function (data) {
        $scope.commentsLoaded(data);
    });

    $scope.commentsLoaded = function (data, status) {
        $scope.comments = data;
    }

});

そしてテンプレート：

<div ng-Controller="CommentListCtrl">
    <ul class="comments" timeago>
        <li ng-repeat="comment in comments">        
            <span class="timeago">{{comment.time}}</span>
            <p>{{comment.content}}</p>
        </li>
    </ul>
</div>

助けてくれてありがとう。

4

2 に答える 2

1

watch メソッドは、2 つの引数 (newValue、oldValue) を持つ関数を取ります。これらの値は、ウォッチの実行時に確認できます。

 $scope.$watch("comments", function (newValue,oldValue) {

私が知る限り、最初に実行されるのはセットアップ時で、oldValue はnullです。その後、他の任務について。値を確認してください。

それを正しく処理するには、次のようなチェックを入れます

if(newValue && newValue!=oldValue) {
   //do something
}
于 2013-10-10T09:27:47.307 に答える
1

あなたの場合、 $watch が 3 回実行される理由は次のとおりです。

  • 初めて実行されるのは起動時です。newValue == undefined
  • 2 回目は、次の行を呼び出すときです。$scope.comments = [];
  • 3 回目は、json を受信したときです。$scope.comments = data;

あなたのjsonには3つのアイテムがあります。

ただし、なぜconsole.log($(this).text()); データがロードされた後、これだけを取得します: {{comment.time}} テンプレートがレンダリングされる前にイベントがキャッチされたようです

その時点で、angular はそのバインディングをまだ更新しておらず、ビューは更新されていないためです。

懸念事項の分離と、angular のような mvc 構造の操作方法については、ビューは表示用です。そこからデータにアクセスするのではなく、代わりにモデルを介してアクセスしてください。あなたの場合、表示をフォーマットしようとしていますが、それはフィルターの仕事でなければなりません

次のようなフィルタを記述します。

angular.module('commentController').
  filter('dateFormat', function() {
    return function(input) {
      return moment(input).fromNow();
    }
  });

timeagoHTML で使用します。ディレクティブは必要ありません。

<div ng-Controller="CommentListCtrl">
    <ul class="comments">
        <li ng-repeat="comment in comments">        
            <span class="timeago">{{comment.time | dateFormat }}</span>
            <p>{{comment.content}}</p>
        </li>
    </ul>
</div>
于 2013-10-10T12:21:08.480 に答える