AngularJs - 指令控制器中使用自定义过滤器 [英] AngularJs - Use custom filter inside directive controller

问题描述

场景结果
我有一个包含有关他们的信息的用户的数组，我做了一个 NG-重复结合生成一个HTML用户卡，保持每张卡相对的范围，自定义指令个人用户，用户模型里面是我需要自定义过滤器来过滤模板被编译之前，因为如果我这样做，在模板中所花费的时间进行过滤，使工具提示不显示，直到值值已准备就绪，看起来好像有什么东西是行不通的。

我的code到目前为止

  // userCard指令
angular.module（'userCard'，[]）。指令（UserCard'，函数（）{
  返回{
    限制：EA，
    templateUrl：userCard.tpl.html'，
    范围： {
        用户：'='
    }，
    控制器：['$范围，fromNowFilter'，函数（$范围，fromNowFilter）{        angular.forEach（$ scope.user.reminders，功能（提示）{
            reminder.last_sent = reminder.last_sent ===空？ 不提醒已发送！ ：fromNowFilter（reminder.last_sent）;
        }）;
    }]，
    链接：功能（范围，元素）{
        //基类添加到用户卡元素
        element.addClass（'用户卡'）;
    }
  };
}）;
// fromNow自定义过滤器
angular.module（'userCard'）。过滤器（'fromNow'，函数（）{
  复位功能（日期）{
    返回时刻（日期）.fromNow（）;
  };
}）;
//我不断收到错误
未知提供商：fromNowFilterProvider＆LT;  -  fromNowFilter
 

解决方案

尝试注入 filterprovider 并运行过滤器。

 控制器：'$范围，$过滤'，函数（$范围，$过滤器）{
       变种fromNowFilter = $滤波器（'fromNow'）;
        angular.forEach（$ scope.user.reminders，功能（提示）{
            reminder.last_sent = reminder.last_sent ===空？ 不提醒已发送！ ：fromNowFilter（reminder.last_sent）;
        }）;
    }]，
 

Scenario
I have an array of users containing information about them, I do an ng-repeat combined with a custom directive that generates an HTML user card, keeping the scope of each card relative to the individual user, inside the user model there is a value that I need to filter with a custom filter before the template gets compiled, because if I do it inside the template the time it takes to be filtered makes the tooltip not to show until the value is ready and that looks as if something is not working.

My code so far

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

解决方案

Try inject filterprovider and run your filter.

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

这篇关于AngularJs - 指令控制器中使用自定义过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！