날짜를 표시하는 각도 명령

<time datetime="2012-10-11T12:00:00Z"></time>을 <time datetime="2012-10-11T12:00:00Z">Thu Oct 11 2012</time>으로 바꾸는 각도 지시문을 작성하려고합니다.날짜를 표시하는 각도 명령

나의 시도는 지금까지처럼 보이는 -을 myApp가 이미 정의로 (또한 JSFiddle에)

angular.module('myApp').directive('time', function() { 
    return { 
    restrict: 'E', 
    link: function (scope, el, at) { 
     el.text((new Date(at.datetime)).toDateString()); 
    } 
    }; 
});

그러나 at.datetime 즉시 채워지지 않은, 그래서를 통해 전송 undefined을 얻고, Invalid Date은 무엇 내이다 로 변경됩니다.

단방향 바인딩을 지정하고 변경 사항을 다시 평가할 수는 있지만 설명서를 읽는 데 어려움을 겪고 있습니다. 어떻게해야합니까? 당신이 각도의 이상한 버전을 사용하지 않는 module의 2 번째의 인수가 필요하기 때문에

출처

2013-05-13 JP.

여기에 포함 된 모델이 있는가 (문서의 모든 서식 옵션에 대한 위의 링크 AngularJS와 참조)? 플 런커, 바이올린을 공유 할 수 있습니까? – Chandermani

저는 양방향 바인딩이 아닌 데이터로 뷰가 변경되기를 기대하기 때문에 모델을 사용하지 않습니다. 나는 그것을 바이올린에 넣으려고했지만, 나는 비참하게 실패하고있다. 이것은 내가 지금까지 왔던 곳입니다 : http://jsfiddle.net/jphastings/Ns2Ny/ –

@JP 당신은 그 피들에서'ng-app = "myApp"가 필요합니다 - 당신의 console.log 문은 결코 실행되지 않았기 때문에 실행되지 않았습니다. 사용중인 Angular 응용 프로그램에 정의되지 않았습니다. – Langdon

~~, 코드는 전혀 작동하지합니다~~

이미 myApp을 정의하지 않았다면 (나는 '하는 난 당신이 아니라고 가정), 위의 코드는 그대로 작동하지 않습니다. 당신이 모듈을 정의 할 때, 두 번째 인수 (종속성 목록)가 필요합니다 :

http://jsfiddle.net/cjWQB/ 당신이 무슨 일을하는지에 따라, 말했다 :

이

angular.module('myApp', []); // this creates an app (setter) 

angular.module('myApp'); // this creates gives you a reference to an already created app (getter)

그렇지 않으면 코드가 잘 작동하는 것 같다 (또는 아마도 time 태그가 무엇인지 모르겠다), time이라는 이름의 속성 지시어 대신에 엘리먼트 지시어를 만드는 것이 더 합리적 일 수있다.

업데이트 : 위의 Fiddler를 기반으로 모듈을 정의 할 때 ngApp 지시어는 해당 명명 된 모듈을 가리켜 야합니다. 자바 스크립트

function TestCtrl($scope) { 
}

편집

을

HTML

<html ng-app> 
    <div ng-controller="TestCtrl">...</div> 
</html>

: 좀 더 간단한 방법을 취하고처럼 컨트롤러 기능을 사용할 때 <html ng-app>이 작동 유일한 시간이다 귀하의 질문에 대한 변화를 바탕으로, 당신은 지금 엘리먼트 지시어를 사용하고 있기 때문에, 당신은 날짜를 가져와야합니다. 다른 곳에서. 마크 위의 의견에 제안으로, 그 장소는 scope.temporal입니다 : http://jsfiddle.net/Ns2Ny/4/

그러나 직접 지시에 temporal를 참조하면 정말 재사용하지 않습니다, 당신은 여분의 마일을 가고 싶어 좋아하고 간접적으로 참조에 $watch를 사용합니다 그래서 그것의 가치와 계속 탭 : 내 console.log 문

http://jsfiddle.net/Ns2Ny/5/

angular.module('myApp',[]) 
.controller('temporalCtrl', function($scope) { 
    $scope.temporal = "2012-11-10T12:00:00Z"; 
}) 
.directive('time', function() { 
    return { 
     restrict: 'E', 
     link: function (scope, el, at) { 
      console.log('scope', scope); 
      console.log('at', at); 
      scope.$watch(at.datetime, function (newValue) { 
       el.text((new Date(newValue)).toDateString()); 
      }); 

     } 
    }; 
});

기록해 둡니다. 디버깅 할 때 scope 및 at에있는 것을 이해하는 것이 매우 유용합니다.

출처

2013-05-13 14:41:09 Langdon

수정 해 주셔서 감사합니다. - 아직 코드를 피들에 적용하는 데 익숙하지 않습니다! 그 일을 마친 후 왜 내 질문이 이상하게 보일지 깨달았습니다. 위 텍스트를 업데이트했습니다. –

@JP 편집을 참조하십시오. – Langdon

필자는 마침내'at '가 무엇인지 알아 냈습니다. 내가 귀하의 업데이트를보기 전에 내 코멘트를 삭제했지만 사람들을 따라갈 수 있도록 다시 추가 할 것입니다. –

그래서 내가 무엇을 at (나는 이것을 attrs으로 보았습니다.)을 알아 냈습니다.대신

.directive('time', function($parse) { 
    return { 
     restrict: 'E', 
     link: function (scope, el, attrs) { 
      var model = $parse(attrs.datetime); 
      el.text((new Date(model(scope))).toDateString()); 
     } 
    }; 
});

출처

2013-05-13 15:43:13

'temporal '의 값이 바뀔 수 있다면 @ watch를 사용한 @ Langdon의 대답 (+1)은 $ parse보다 낫습니다. –

사용 필터 : 당신이 지시 속성 값으로 범위 속성 temporal을 지정하는 이후 fiddle에서

<time datetime="temporal">it hasn't rendered</time>

사용 $parse은 지시어 안에 그 속성 값을 얻을 수 . 내장 날짜 필터 : ng-filter:date이 처리해줍니다.

Fiddle

<time datetime="temporal">{{temporal|date:'EEE MMM d yyyy'}}</time>

출처

2013-05-13 18:45:46

아주 좋은 지적입니다! 나는 다른 대답을 계속 고수 할 것입니다. - 왜냐하면 나는 그 안에 몇 시간 전에 코드를 넣을 것이기 때문입니다. –

날짜를 표시하는 각도 명령

답변

관련 문제