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.

What is your question? What's not working, what are you expecting can you give a bit more background? — JanR
one thing I notice is that in your template you are binding: ng-model="Date" in whereas in your code you are calling it "date" also where are you setting $scope.date initially? — JanR

Kalhan.Toress Kalhan.Toress · Accepted Answer · 2014-11-26T04:47:01

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>',

ng-model for the custom directive Angular

1 Answers