CODEWITHSUNDEEP
angularjsangularjs-directivedatepickerangular-ui
Wild Goat
Wild Goat

Reputation: 3579

Angular JS pass attributes to directive template

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>

Upvotes: 3

Views: 3961

Answers (1)

Praveen Singh
Praveen Singh

Reputation: 2569

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>

Upvotes: 3

Related Questions