Question

我解释了我的问题。

所以我尝试为表单创建一个日期选择器 填写输入文本。我为＃34; datepicker＆＃34;做了一个指令。

但现在我遇到了一个问题，我无法在指令中使用＆＃34; ng-model＆＃34; ，而我也不知道如何解决这个问题。 datepicker中的输入需要由范围填充＆＃34; projetData.dateConception＆＃34;并且需要通过表格阅读。

我告诉你我的代码：

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">
    .
    .
    .

屏幕：

Img of the inputs in the form

Img of the datepicker which is filling the input

总之，我希望通过＆lt; datepicker＆gt; ...可以读取＆＃34; projetData.dateConception＆＃34;，修改它。然后表单在提交时发送给我的数据库。（已经完成）

感谢您的所有回复

Answer 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>

Angular JS - 将ng-model添加到指令，以

1 个答案: