Question

我有一个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。有没有办法合并directive和filter这两个元素（text filed和<b>标记）？

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

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

1 个答案: