web-dev-qa-db-ja.com

Angular JSでテンプレートを作成しているときにヘルパーメソッドを使用する

現在、ウェブサイトを以前のテンプレートから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を使用して、テンプレートの範囲内で同じタイプの機能を利用する方法を理解しようとしています。同様のことを行うことは可能ですか？可能な場合はどうしますか？

javascripttemplatesangularjsview-helpers
19
yaegerbomb

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

<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;
     }
}
32
dnc253

データの表示のみに関心がある場合、pkozlowski.opensourceで既に述べたように、フィルターはデータを表示用にフォーマットする「角度のある方法」です。既存の日付フィルターでは不十分な場合は、カスタムフィルターをお勧めします。そうすると、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;
   }
 });

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

フィルターのもう1つの利点は、フィルターをチェーンできることです。したがって、いつかアプリの一部の場所で空の日付が何も表示されない（空白になる）と判断した場合、アプリの他の場所では空の日付が 'TBD'を表示する必要がある場合、フィルターで後者を解決できます。

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

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

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

提示されたユースケースを見ると、最良の呼び出しは、ここで説明されている日付フィルターになります： 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つ）で定義する必要がある場合：

function MyCtrl($scope) {

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