選擇日期後型號未更新

Question

以下代碼與純正angularjs正確搭配使用，但是當我將其集成到Mobile Angular UI App時，它在選擇日期後不會更新模型。如果我編輯沒有日期選擇器的輸入字段，它工作正常。

模板：

<div> 
<label>{{myLabel}}:</label> 
<input class="form-control datetime-picker" placeholder="{{myPlaceholder}}" ng-model="ngModel" required="required"> 
</div> 

指令JS代碼：

(function(){ 
    var app = angular.module('MeetingApp.directives.HelpDirective', []); 

    app.directive("datetimePicker", function() { 
     return { 
      restrict: 'E', 
      templateUrl: "datetime-picker.html", 
      scope: { 
       ngModel: '=', 
       myPlaceholder: '@', 
       myLabel: '@' 
      }, 
      require: ['?^ngModel'], 
      link: function(scope, element, attrs, ngModelCtrl) { 
       $(element).find('.datetime-picker').datetimepicker({ 
        format: "dd.mm.yyyy hh:ii", 
        autoclose: true, 
        language: "de", 
        startDate: new Date(), 
        minuteStep: 10 
       }); 
      } 
     }; 
    }); 
})(); 

用法：

<form method="post" id="meetingForm" ng-controller="MeetingController as meetingCtrl" novalidate>  
    <datetime-picker my-placeholder="Startzeit" my-label="Startzeit" ng-model="meetingCtrl.meeting.start"></datetime-picker> 
    <datetime-picker my-placeholder="Endzeit" my-label="Endzeit" ng-model="meetingCtrl.meeting.end"></datetime-picker> 
</form> 

Github上鍊接：https://github.com/knobli/meetingApp

運行應用程序： 個NPM安裝-g涼亭喲一飲而盡發電機mobileangularui 涼亭安裝 一飲而盡建立 一飲而盡

Answer 1

這require: ['?^ngModel'],對我來說很陌生... 如果你需要一個東西，在我看來，它不能是可選的，對吧？

嘗試使用require: 'ngModel',並讓我知道它是否有效。

您需要使用這樣的：

dpElement.on('changeDate', function(ev) { 
      //need to run digest cycle for applying bindings 
      scope.$apply(function() { 
       ngModelCtrl.$setViewValue(ev.date); 
      }); 
     }); 

但是要注意不要打電話給你的參數event。這是JavaScript中的保留字。 Take a look at W3Schools

Answer 2

每當你使用，你需要手動更新scope綁定任何jQuery插件，因爲從外部的角度範圍內的任何更改將不會運行角消化週期。

對於更新ng-model的輸入更改，您需要更新其更改事件dp.change的ng模型。

指令

app.directive("datetimePicker", function() { 
    return { 
     restrict: 'E', 
     templateUrl: "datetime-picker.html", 
     scope: { 
      ngModel: '=', 
      myPlaceholder: '@', 
      myLabel: '@' 
     }, 
     require: ['?^ngModel'], 
     link: function(scope, element, attrs, ngModelCtrl) { 
      var dpElement = $(element).find('.datetime-picker'); 
      dpElement.datetimepicker({ 
       format: "dd.mm.yyyy hh:ii", 
       autoclose: true, 
       language: "de", 
       startDate: new Date(), 
       minuteStep: 10 
      }); 
      dpElement.on('dp.change', function(event) { 
       //need to run digest cycle for applying bindings 
       scope.$apply(function() { 
        ngModelCtrl.$setViewValue(event.date); 
       }); 
      }); 
     } 
    }; 
}); 

類似SO Answer這裏有詳細的解釋。