19

現在、Web サイトを以前のテンプレートから Angular に変換中です。以前使用していたテンプレート プロセスでは、ヘルパー メソッドを呼び出してデータを正しく表示することができました。例えば：

<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>

これはとてもよかったです。テンプレートに関する限り、Angular で同じタイプの機能を利用する方法を見つけようとしています。同様のことを行うことは可能ですか？もしそうなら、どのように？

4

3 に答える 3

33

データ表示のみに関心がある場合は、pkozlowski.opensource が既に述べたように、フィルターは表示用にデータをフォーマットする「Angular の方法」です。既存の日付フィルターでは不十分な場合は、カスタム フィルターをお勧めします。次に、HTML はより「角度のある」ように見えます。

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

上記の構文は、(のみ) 書式設定を行っていることを明確にします。

カスタムフィルターは次のとおりです。

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

フィルター/フォーマッターをモジュールにカプセル化することで、それらを複数のコントローラーで (再) 使用することも簡単になります。それらを必要とする各コントローラーは、OurFormatters を注入するだけです。

フィルタのもう 1 つの利点は、フィルタを連鎖できることです。したがって、ある日、アプリ内のいくつかの場所で空の日付を何も表示しない (空白にする) べきであると判断した場合、アプリの他の場所では空の日付を「TBD」と表示する必要がある場合、フィルターを使用して後者を解決できます。

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

または、カスタム フィルターは 1 つ以上の引数を取ることができます (上記の例は引数をサポートしています)。

<span class="posted-date">Posted {{CreatedDate | dateFormatter:'TBD'}}</span>
于 2012-09-18T18:19:08.263 に答える
32

メソッドをコントローラーに追加するだけです。このようなもの：

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

次に、コントローラー:

function MyCtrl($scope)
{
     $scope.parseDate = function(jsonDate) {
        //date parsing functionality
        return newParsedDate;
     }
}
于 2012-09-17T20:55:58.850 に答える
7

提示されたユースケースを見ると、次のように説明されている日付フィルターが最適です。http: //docs.angularjs.org/api/ng.filter :date このフィルターを使用すると、次のように記述できます。

{{CreatedDate | date}}

上記のフィルターはカスタマイズ可能であるため、さまざまな日付形式などを使用できます。

一般的に言えば、フィルターはフォーマットロジック/UIヘルパー関数をカプセル化するのに非常に便利です。フィルタの作成について詳しくは、http：//docs.angularjs.org/guide/dev_guide.templates.filters.creating_filtersをご覧ください。

フィルタは素晴らしく、多くのユースケースに適合しますが、テンプレートで関数を使用した後であれば、それは可能です。スコープで関数を定義するだけで、テンプレートで直接使用する準備が整います。

{{doSomething(CreatedDate)}}

ここで、doSomethingはスコープ（現在の1つまたは親スコープの1つ）で定義する必要があります。

function MyCtrl($scope) {

    $scope.doSomthing = function(argument){
        //ui helper logic here
    }    
}
于 2012-09-17T20:58:16.790 に答える