jQuery timeago 또는 momentjs와 AngularJS를 함께 사용하십시오.

Question

timeago plugin을 사용하여 날짜를 더 멋지게 보이게하고 싶습니다. 문제는 이러한 날짜가 REST에서 AngularJS를 통해 동적으로 가져 오는 것입니다. 그래서,이 jQuery 플러그인을 내 페이지에 첨부하면 처리되지 않습니다.

그럼 어떻게하면 좋을까요? 가능한 경우 jQuery없이 실행하면 기쁠 것입니다.

Answer 1

나는 momentjs - http://momentjs.com/을 사용할 것입니다 - 의존성은 없습니다.

그러면 'timeAgo'또는 'fromNow'라는 필터를 만들면됩니다. 그 momentjs 그것을 부르는 때문에 당신은 아마 fromNow를 호출한다 : 당신은 단지보기에 바인딩 간단한 데이터 사용합니다

다음

angular.module('myApp').filter('fromNow', function() { 
    return function(date) { 
    return moment(date).fromNow(); 
    } 
}); 

: 당신이 정말 jQuery 플러그인을 사용하고자하는 경우

<p>Pizza arrives {{pizzaArrivalDate | fromNow}}</p> 

을, 당신 아마도 지침을 작성해야 할 것입니다. 그러나 데이터를 DOM 요소에 연결하기 때문에 그렇게하는 것은 좋지 않습니다. 위의 방법은 각도 방식의 DOM에서 데이터를 분리합니다. 귀엽습니다 :-D

Answer 2

jQuery가 필요한 경우 지시어/필터를 작성하는 것이 좋습니다.

app.directive("timeAgo", function($compile) { 
    return { 
    restrict: "C", 
    link: function(scope, element, attrs) { 
     jQuery(element).timeago(); 
    } 
    }; 
}); 

app.filter("timeAgo", function() { 
    return function(date) { 
    return jQuery.timeago(date); 
    }; 
}); 

Directive and/or Filter (jsbin)

Answer 3

당신은 (momentjs을 기반으로) angular-moment 모듈에서 am-time-ago 지시어를 사용할 수 있습니다.

jQuery가 필요하지 않으며 시간이 갈수록 시간이 업데이트됩니다. 예 :

<span am-time-ago="lastLoginTime"></span> 

상기 범위의 함유량은, "2 시간 전", 예를 들어, 상대적으로 시간 문자열로 치환되고, 시간이 진행됨에 따라 자동으로 갱신한다.

Answer 4

moment.js가 최선의 선택입니다. 필자는 모든 순간 서식 지정 방법을 사용할 수있는 일반 순간 필터를 만들었습니다.

angular.module('myApp', []) 
    .filter('moment', [ 
    function() { 
     return function (date, method) { 
     var momented = moment(date); 
     return momented[method].apply(momented, Array.prototype.slice.call(arguments, 2)); 
     }; 
    } 
    ]); 

당신은 여기 http://jsfiddle.net/gregwym/7207osvw/