jQuery timeago 또는 mementjs 및 Angular 사용JS 통합

jQuery timeago 또는 mementjs 및 Angular 사용JS 통합

timeago 플러그인을 사용하여 날짜를 더 예쁘게 만들고 싶습니다.문제는 이러한 날짜가 Angular를 통해 가져온다는 것입니다.REST로부터의 JS를 동적으로 실행합니다.이 jQuery 플러그인을 페이지에 첨부해도 처리되지 않습니다.

그렇다면, 어떻게 하면 이런 것들을 더 잘 할 수 있을까요?가능하면 jQuery 없이 달려보고 싶습니다.

저는 monentjs - http://momentjs.com/ 를 사용합니다.이것에는 의존관계가 없습니다.

그런 다음 'timeAgo' 또는 'fromNow'라는 필터를 만들 수 있습니다.그렇게 부르는 게 좋을 것 같아fromNow왜냐면 그걸 모멘츠들이 부르는 거거든

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

그런 다음 뷰에서 단순한 데이터 바인딩을 사용합니다.

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

jQuery 플러그인을 사용하려면 지시문을 작성해야 합니다.그러나 이 방법은 데이터를 DOM 요소에 링크하기 때문에 좋지 않습니다.위의 방법은 DOM에서 데이터를 분리하는 각도 방식입니다.그리고 예쁘다 :-D

를 사용할 수 있습니다.am-time-ago각 모멘트 모듈의 지시(Moment.js에 기반)

jQuery는 필요하지 않으며 시간이 경과함에 따라 시간이 업데이트됩니다.예:

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

위 범위의 내용은 상대 시간 문자열(예: "2시간 전")로 대체되며 시간이 경과함에 따라 자동으로 업데이트됩니다.

moment.model이 최선의 선택입니다.모멘트 포맷 방법을 사용할 수 있는 범용 모멘트 필터를 만들었습니다.

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));
      };
    }
  ]);

사용법

<div>{{ date | moment:'fromNow' }}</div>
<div>{{ date | moment:'calendar' }}</div>

http://jsfiddle.net/gregwym/7207osvw/에서 실제 작업을 확인할 수 있습니다.

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

지시 및/또는 필터(jsbin)

언급URL : https://stackoverflow.com/questions/14774486/use-jquery-timeago-or-momentjs-and-angularjs-together