Angular JS - 将 ng-model 添加到以形式调用的指令答案

【问题标题】：Angular JS - Add ng-model to directive which is called in formAngular JS - 将 ng-model 添加到以形式调用的指令
【发布时间】：2017-04-28 13:52:42
【问题描述】：

我正在尝试制作一个日期选择器，它为表单填充输入文本。我为“datepicker”创建了一个指令。

但是现在我有一个问题，我不能在指令上使用“ng-model”，我不知道如何解决这个问题。日期选择器中的输入需要被范围“projetData.dateConception”填充，需要被表单读取。

DatePickerDirective.js：

app.directive("datepicker", function(){
return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {},
    templateUrl: './partials/datepicker.html',
    link: function(scope, element, attrs){

        scope.datepicker = {};
        scope.datepicker.montListShowed = false;
        .
        .
        .

addProjetView.html

<div class = "fiche-line" ng-show="displayField.DateConception">
    <span class="fiche-field-title">Date Conception : </span> 
    <datepicker ng-model="projetData.dateConception" ></datepicker>
</div>
<div class = "fiche-line" ng-show="displayField.DateSolution">
    <span class="fiche-field-title">Date Solution : </span>
    <input type="date" ng-model="projetData.dateSolution" >
</div>

datepicker.html（指令模板）

<div class="datepicker-relative datepicker-no-touch">
    <input ng-model="datepicker.dateSelected" class="inputDate" ng-focus="datepickerVisible = true" type="text"></input>
    <div class="datepicker-popup" ng-show="datepickerVisible">
    .
    .
    .

表单中的输入：

填充输入的日期选择器

总之，我想让<datepicker> 生成的输入能够读取“projetData.dateConception”，修改它。然后表单在提交时发送到我的数据库。（已经完成）

【问题讨论】：

您可以使用 Scope.$watch 拉取 ng-model 数据。这里有一些很好的答案：stackoverflow.com/questions/14693052/…, stackoverflow.com/questions/14693052/…。 @dnc253 在这里有一个使用演示：jsfiddle.net/BtrZH/5。
$watch ngModel from inside directive using isolate scope的可能重复

标签： html angularjs datepicker directive angular-ngmodel

【解决方案1】：

感谢您的回复，现在可以使用了！

这就是我现在的代码：

DatePickerDirective.js：

app.directive("datepicker", function(){
return {
    restrict: 'EA',
    replace: true,
    require: 'ngModel',
    transclude: true,
    scope: { ngModel : '='},
    templateUrl: './partials/datepicker.html',
    link: function(scope, element, attrs){

        scope.datepicker = {};

addProjetView.html

<div class = "fiche-line" ng-show="displayField.DateConception">
     <span class="fiche-field-title">Date Conception : </span> 
     <datepicker ng-model="projetData.dateConception" ></datepicker>
</div>

datepicker.html（指令模板）

<div class="datepicker-relative datepicker-no-touch">
        <input ng-model="ngModel" class="datepicker-input-date" type="date"></input>
</div>

【讨论】：