Angular JS pass attributes to directive template

Question

I have custom directive for datepicker. I want to reuse it in several different places. But in order to reuse current directive I have to dynamically pass and change different attributes into my-datepicker directive.

If you look inside datepicker.html I am using following attributes: ng-model="departureDate" min-date="minDateDeparture" is-open="departureOpened".

Question: How do I set this attributes on the my-datepicker element level and pass all the way down to my directive html template? I want to achieve something like that:

<my-datepicker ng-model="departureDate1" min-date="minDateDeparture1" is-open="departureOpened1"></my-datepicker>

<my-datepicker ng-model="departureDate2" min-date="minDateDeparture2" is-open="departureOpened2"></my-datepicker>

Thanks for any help!

datepicker-contoller.js

app.directive('myDatepicker', function() {
    return {
        restrict: 'E',
        templateUrl: 'templates/datepicker/datepicker.html'
    };
});

datepicker.html

<fieldset>
    <div class='input-group'>
        <input type="text" class="form-control" datepicker-popup ng-model="departureDate" min-date="minDateDeparture" is-open="departureOpened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
            <span ng-click="open1($event)" class="btn btn-default input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
    </div>
</fieldset>

Datepicker usage

    <div ng-controller="MyController">
        <div class="col-md-2">
            <my-datepicker></my-datepicker>
        </div>

        <div class="col-md-2">
            <my-datepicker></my-datepicker>
        </div>
    </div>

docs.angularjs.org/guide/…

JB Nizet
– JB Nizet

2015-08-02 19:29:55 +00:00
Commented Aug 2, 2015 at 19:29 — JB Nizet
– JB Nizet, Commented Aug 2, 2015 at 19:29

Praveen Singh · Accepted Answer · 2015-08-03 21:09:12Z

3

Update: See this jsFiddle: http://jsfiddle.net/j31ky7c2/

You can pass the data as well as functions as attribute in your directive.

<my-datepicker min-date="minDateDeparture2" is-open="departureOpened2" some-function="testFunction()"></my-datepicker>

You can receive this data in your directive's scope.

directive('myDatepicker', [function() {
return {
    restrict: 'E',
    scope: {
        minDate: '@',
        isOpen: '@',
        someFunction: '&'
    },
    link: function(scope, elm, attrs) {
    }
}
}]);

Then you can simply use minDate and isOpen and someFunction in your directive template like:

<div ng-bind="{{::minDate}}"></div>
<div ng-bind="{{::isOpen}}"></div>
<Button ng-click="someFunction()">Click me</Button>

edited Aug 3, 2015 at 21:09

answered Aug 2, 2015 at 19:40

Praveen Singh

2,5593 gold badges21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Wild Goat Over a year ago

Thanks a lot for your detailed answer! How do I pass function name from element level to directive? ng-click="open1($event)"

Itamar L. Over a year ago

Use scope: { functionName: '&' }

Wild Goat Over a year ago

@ItamarL. could you please give me example how do I invoke it inside my .html page?

Praveen Singh Over a year ago

@WildGoat, I have updated my answer to include an example showing how to pass a function to a directive.

Wild Goat Over a year ago

@pravee-n, I've done exactly what you have said but unfortunately there are no event fired on ng-click. Could you please prepare JSfiddler example using templateUrl and .hmtl template file? Thanks!

|

Collectives™ on Stack Overflow

Angular JS pass attributes to directive template

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related