각도 JS로 템플릿을 작성하는 동안 도우미 메서드 사용

Question

현재 웹 사이트를 이전 템플릿에서 각도로 변환하는 과정입니다. 우리가 사용하고 있던 이전의 템플릿 과정에서 데이터를 올바르게 표시하기위한 도우미 메서드를 호출 할 수있었습니다. 예 :

<script type="text/javascript"> 
$.views.helpers({ 
    parseDate: function (jsonDate) { 
     if (jsonDate != null) { 
      var newDate = Utils.PrettyDate(Utils.ConvertJsonDateToJsDate(jsonDate)); 
      return newDate; 
     } 
    } 
}); 
</script> 


<div class="post-info"> 
    <span class="posted-date">Posted {{:~parseDate(CreatedDate)}}</span>&nbsp|&nbsp<span>{{:ReplyCount}} Replies</span> 
</div> 

매우 좋았습니다. Templating만큼 Angular와 동일한 유형의 기능을 활용하는 방법을 찾으려고합니다. 비슷한 일을 할 수 있습니까? 그렇다면 어떻게?

Answer 1

컨트롤러에 메서드를 추가하기 만하면됩니다. 날짜 필터는 여기에 설명

function MyCtrl($scope) 
{ 
    $scope.parseDate = function(jsonDate) { 
     //date parsing functionality 
     return newParsedDate; 
    } 
} 

Answer 2

제시 한 사용 사례를 살펴보면 최선의 호출은 다음과 같습니다 : 이런 식으로 뭔가 :

<div class="post-info" ng-controller="MyCtrl"> 
    <span class="posted-date">Posted {{parseDate(CreatedDate)}}</span> 
</div> 

그런 다음 컨트롤러가 http://docs.angularjs.org/api/ng.filter:date 당신이 쓸 수있는이 필터를 사용 :

{{CreatedDate | date}} 

언급 한 필터는 맞춤 설정할 수 있으므로 다른 날짜 형식 등을 사용할 수 있습니다.

일반적으로 필터는 서식 논리/UI 도우미 기능을 캡슐화하는 데 매우 유용합니다. 필터 작성에 대한 자세한 내용은 다음을 참조하십시오. http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters

필터는 유용하며 많은 사용 사례에 적합하지만 템플릿에서 함수를 사용한 직후라면 가능합니다. 그냥 범위에 함수를 정의하고이 템플릿에서 직접 사용할 준비가 :

: 해봐요은 범위 (현재 하나 부모 범위 중 하나)에 정의 될 필요가

{{doSomething(CreatedDate)}} 

function MyCtrl($scope) { 

    $scope.doSomthing = function(argument){ 
     //ui helper logic here 
    }  
} 

Answer 3

데이터 표시에만 관심이있는 경우 pkozlowski.opensource에서 이미 언급했듯이 필터는 표시 할 데이터의 형식을 지정하는 "각도 방식"입니다. 기존 날짜 필터가 충분하지 않은 경우 맞춤 필터를 제안합니다. 그런 다음 HTML보다 "각도"모양 :

<span class="posted-date">Posted {{CreatedDate | dateFormatter}}</span> 

위의 구문은 당신이 (만) 형식있어 분명히 있다고한다.

가 여기에 사용자 정의 필터입니다 : - 그들을 그냥 OurFormatters를 주입해야하는 각 컨트롤러 모듈에 우리의 필터/포매터를 캡슐화함으로써

angular.module('OurFormatters', []). 
filter('dateFormatter', function() {    // filter is a factory function 
    return function(unformattedDate, emptyStrText) { // first arg is the input, rest are filter params 
     // ... add date parsing and formatting code here ... 
     if(formattedDate === "" && emptyStrText) { 
      formattedDate = emptyStrText; 
     } 
     return formattedDate; 
    } 
}); 

, 또한 여러 컨트롤러에서 사용 (다시)에 용이하다.

필터의 또 다른 이점은 필터를 사용할 수 있다는 것입니다.앱에서 다른 장소에서 빈 날짜가 '미정'을 표시해야합니다 반면 앱에서 어떤 장소에서 빈 날짜, 아무 것도 (공백) 표시되지해야한다고 결정 언젠가한다면, 필터는 후자를 해결할 수 :

<span class="posted-date">Posted {{CreatedDate | dateFormatter | tbdIfEmpty}}</span> 

또는 사용자 정의 필터가 하나 이상의 인수를 가질 수 있습니다 (위의 예는 인수를 지원함).

<span class="posted-date">Posted {{CreatedDate | dateFormatter:'TBD'}}</span>