我们可以结合Angular指令和工厂的代码吗?

时间:2016-11-02 07:12:14

标签: angularjs angular-directive angular-filters

我有一个Angular指令,如下所示:

.directive('datefilter', function (dateFilter) {
    return {
        require: 'ngModel',

        link: function (scope, element, attrs, ngModelController) {
            ngModelController.$parsers.push(function (data) {
                //convert data from view format to model format
                return new Date(data); //converted
            });

            ngModelController.$formatters.push(function (data) {
                //convert data from model format to view format
                return new Date(data); //converted
            });
        }
    }
})

此指令我正在使用像

这样的文本字段
<input type="text" ng-model="someModelName" datefilter uib-datepicker-popup="{{format}}">

立即

我有这个角度过滤器:

.filter('datefilterfilter', function (dateFilter) {
        return function (value, format) {
            return dateFilter(new Date(value), format);
        };
    });

我正在使用此过滤器:

<b> {{someModelNAme | datefilterfilter: format}} </b>

最终指令和过滤器执行相同的工作,但此指令需要ng-model,因此我无法将其应用于<b>标记,因为它没有任何ng-model。有没有办法合并directivefilter这两个元素(text filed<b>标记)?

1 个答案:

答案 0 :(得分:1)

您可以通过注入$filter服务来使用指令中的任何过滤器:

.directive('datefilter', ["$filter", function ($filter) {
    return {
        require: 'ngModel',

        link: function (scope, element, attrs, ngModelController) {
            ngModelController.$parsers.push(function (data) {
                //convert data from view format to model format
                return $filter("datefilterfilter")(data); //converted
            });

            ngModelController.$formatters.push(function (data) {
                //convert data from model format to view format
                return $filter("datefilterfilter")(data); //converted
            });
        }
    }
}])