ng-model for the custom directive Angular

Question

Problem Question,

I have a custom datepicker directive and want to link ng-model to it in the view.

<div my-date-picker ng-model="date">
     {{date}}
</div>

the ng-model {{date}} does not display can anyone please tell me what i am doing wrong

I have plunker created http://plnkr.co/edit/bWpNITdjBLZJO1p221xe?p=preview.

Answer 1

you are using <div my-date-picker ng-model="date"> datepicker dirctive

that means your going to replace inside of this div, by the template in the directive so your {{ Date }} is no longer there its replaced by the template.

if u put {{ Date }} outside of the div it will work

and note that model is not date it should be Date coz the model name of the input is Date check the directive template

template: '<input class="dateInput" is-open="openthis.isOpened" type="text" datepicker-popup="dd-MM-yyyy" ng-model="Date" ng-required="true" />'

working plunker

---

OR you can add {{ Date }} to the directive template

 template: '<input class="dateInput" is-open="openthis.isOpened" type="text" datepicker-popup="dd-MM-yyyy" ng-model="Date" ng-required="true" />' +
        '<span ng-click="open($event)" class="glyphicon glyphicon-calendar calImage"></span>'+
        '<h2>{{ Date }}</h2>',