AngularJs - 在指令控制器中使用自定义过滤器

时间:2014-08-29 01:09:49

标签: javascript angularjs angularjs-filter

情景
我有一个包含有关它们的信息的用户数组,我做了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

1 个答案:

答案 0 :(得分:21)

尝试注入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);
        });
    }],