web-dev-qa-db-ja.com

AngularJs-ディレクティブコントローラー内でカスタムフィルターを使用する

シナリオ
ユーザーに関する情報を含むユーザーの配列があります。ng-repeat HTMLユーザーカードを生成するカスタムディレクティブと組み合わせて、個々のユーザーに対する各カードのスコープを維持します。ユーザーモデル内には、テンプレートをコンパイルする前にカスタムフィルターでフィルター処理する必要がある値があります。テンプレート内でこれを行うと、フィルタリングにかかる​​時間が、値の準備ができるまでツールチップが表示されず、何かが機能していないように見えます。

これまでの私のコード

// userCard directive
angular.module('userCard', []).directive('UserCard', function() {
  return {
    restrict: 'EA',
    templateUrl: 'userCard.tpl.html',
    scope: {
        user: '='
    },
    controller: ['$scope', 'fromNowFilter', function($scope, fromNowFilter) {

        angular.forEach($scope.user.reminders, function(reminder) {
            reminder.last_sent = reminder.last_sent === null ? 'No reminder has been sent!' : fromNowFilter(reminder.last_sent);
        });
    }],
    link: function(scope, element) {
        // Add the base class to the user card element
        element.addClass('user-card');
    }
  };
});


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


// The error I keep getting
Unknown provider: fromNowFilterProvider <- fromNowFilter
javascriptangularjsangularjs-filter
7
CupOfJoe

インジェクト filterprovider を試して、フィルターを実行します。

controller: ['$scope', '$filter', function($scope, $filter) {
       var fromNowFilter = $filter('fromNow');
        angular.forEach($scope.user.reminders, function(reminder) {
            reminder.last_sent = reminder.last_sent === null ? 'No reminder has been sent!' : fromNowFilter(reminder.last_sent);
        });
    }],
21
PSL