How to access arguments in a directive?

Question

I've defined a directive like so:

angular.module('MyModule', [])
    .directive('datePicker', function($filter) {
        return {
            require: 'ngModel',
            link: function(scope, elem, attrs, ctrl) {
                ctrl.$formatters.unshift(function(modelValue) {
                    console.log('formatting',modelValue,scope,elem,attrs,ctrl);
                    return $filter('date')(modelValue, 'MM/dd/yyyy');
                });
                ctrl.$parsers.unshift(function(viewValue) {
                    console.log('parsing',viewValue);
                    var date = new Date(viewValue);
                    return isNaN(date) ? '' : date;
                });
            }
        }
    });

Which I apply to an element like so:

<input type="text" date-picker="MM/dd/yyyy" ng-model="clientForm.birthDate" />

My directive gets triggered whenever I add the date-picker attribute to an element, but I want to know how to access the attribute's value (MM/dd/yyyy) inside my directive JS so that I can remove that constant beside $filter. I'm not sure if any of the variables I have access to provide this.

`attrs.datePicker` doesn't work? – Josh David Miller Jan 24 '13 at 04:44 — Josh David Miller, Jan 24 '13 at 04:44
@JoshDavidMiller: Didn't see that :-) It does work. – mpen Jan 24 '13 at 04:49 — mpen, Jan 24 '13 at 04:49

Joseph Silber · Accepted Answer · 2013-01-24T19:05:17.803

4

Just pull it directly from the attrs:

return $filter('date')(modelValue, attrs.datePicker);

BTW, if the only filter you're using is date, then you can inject that directly:

.directive('datePicker', function (dateFilter) {
    // Keep all your code, just update this line:
    return dateFilter(modelValue, attrs.datePicker || 'MM/dd/yyyy');
    // etc.
}

edited Jan 24 '13 at 19:05

answered Jan 24 '13 at 04:45

Joseph Silber

214,931
59
362
292

I think I can provide a default via `attrs.datePicker || 'MM/dd/yyyy'` -- this seems to work great. Thank you! Will accept in 7ish minutes. – mpen Jan 24 '13 at 04:48
Your 2nd example is confusing me. Where are you returning that from? It looks like you're doing that directly inside the directive function, but `attrs` is only defined in `link`, and where is `dateFilter` coming from? I thought the directive only took those magical `$injections`? – mpen Jan 24 '13 at 06:39
@Mark - My second example is not complete. Instead of including all your code there, I just included the line that would have to be updated if you were to inject the date filter directly. – Joseph Silber Jan 24 '13 at 19:06
@Mark - In addition to the regular injectables, you can inject any filter by appending `Filter` to its name. – Joseph Silber Jan 25 '13 at 03:35

SunnyShah · Answer 2 · 2013-01-25T10:21:58.600

1

You can access it from attrs argument of link function.

Demo: http://plnkr.co/edit/DBs4jX9alyCZXt3LaLnF?p=preview

angModule.directive('moDateInput', function ($window) {
    return {
        require:'^ngModel',
        restrict:'A',
        link:function (scope, elm, attrs, ctrl) {
            var moment = $window.moment;
            var dateFormat = attrs.moMediumDate;
            attrs.$observe('moDateInput', function (newValue) {
                if (dateFormat == newValue || !ctrl.$modelValue) return;
                dateFormat = newValue;
                ctrl.$modelValue = new Date(ctrl.$setViewValue);
            });

            ctrl.$formatters.unshift(function (modelValue) {
                scope = scope;
                if (!dateFormat || !modelValue) return "";
                var retVal = moment(modelValue).format(dateFormat);
                return retVal;
            });

            ctrl.$parsers.unshift(function (viewValue) {
                scope = scope;
                var date = moment(viewValue, dateFormat);
                return (date && date.isValid() && date.year() > 1950 ) ? date.toDate() : "";
            });
        }
    };
});

edited Jan 25 '13 at 10:21

answered Jan 24 '13 at 05:40

SunnyShah

28,934
30
90
137

It doesn't populate my input with the value from `client.birthDate` if I do this.... I want a two-way binding, don't I? Actually, it doesn't seem to work in either direction. The parser gets hit, but it doesn't update my view either. – mpen Jan 24 '13 at 06:34
You mean I have to add `value="{{client.birthDate}}"` in addition to `ng-model="clientForm.birthDate"`? Doesn't that make it slightly less convenient? I'll go look into `$apply` -- haven't learned how that works yet either. – mpen Jan 24 '13 at 06:42
@Mark, Changed the answer with improved original directive. Have a look. – SunnyShah Jan 25 '13 at 10:23
What's the `$observe` add? Doesn't it observe/watch the model value by default? – mpen Jan 26 '13 at 02:07
1

$observe gives you change notification for attributes, this means you can change the format for date-Picker on runtime. – SunnyShah Jan 26 '13 at 05:33

How to access arguments in a directive?

2 Answers2

Linked