用于自定义指令 Angular 的 ng-model [英] ng-model for the custom directive Angular

问题描述

问题问题，

我有一个自定义的 datepicker 指令，想在视图中将 ng-model 链接到它.

{{日期}}

ng-model {{date}} 不显示，谁能告诉我我做错了什么

我创建了 plunker http://plnkr.co/edit/bWpNITdjBLZJO1p221xe?p=preview.

解决方案

您正在使用

datepicker 指令

这意味着您将在此 div 内部由指令中的模板替换，因此您的 {{ Date }} 不再存在，而是由模板替换.

如果你把 {{ Date }} 放在 div 之外，它就会工作

并注意模型不是 date 应该是 Date 因为输入的模型名称是 Date 检查指令模板

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

正在工作 plunker

<小时>

OR 您可以将 {{ Date }} 添加到指令模板

 模板:'<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>{{ 日期 }}</h2>',

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.

解决方案

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

这篇关于用于自定义指令 Angular 的 ng-model的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！