2016-07-16 7 views
2

Ich habe versucht, jquery zu schreiben, um datepicker bei Textklick mit versteckten Eingabebereich zu öffnen. Dies ist auch an mehreren Stellen erforderlich.Angularjs. ng-model wird nicht aktualisiert in datepicker

Folgendes ist mein HTML.

<div class="date-format"> 
    <input class="hidden-date-picker" id="hidden-date1" type="hidden" ng-model="date1"/> 
    <a href="" class="date-picker" id="date1">{{date1 | date: 'dd MMM yyyy a'}}</a> 
</div> 
<div class="date-format"> 
    <input class="hidden-date-picker" id="hidden-date2" type="hidden" ng-model="date2"/> 
    <a href="" class="date-picker" id="date2">{{date2 | date: 'dd MMM yyyy a'}}</a> 
</div> 

Folgende ist Javascript -

var app = angular.module('index-app', []); 

app.controller('index-controller', function($scope) { 
$scope.date1 = new Date(2016, 0, 1); 
$scope.date2 = new Date(); 

$('.hidden-date-picker').each(function() { 
    $(this).datepicker({ 
     changeYear: 'true', 
     changeMonth: 'true', 
     startDate: '07/16/1989', 
     firstDay: 1, 
     onSelect: function(dateText, inst) { 
      console.log($scope.$eval($(this).attr('ng-model'))); 
      $scope.$eval($(this).attr('ng-model')).setTime(Date.parse(dateText)); 
      console.log($scope.date1); 
     } 
    }); 
}); 
$('.date-picker').each(function() { 
    $(this).click(function (e) { 
     $('#hidden-' + $(this).attr('id')).datepicker('show') 
     e.preventDefault(); 
    }); 
}); 
}); 

Es ist klar, von der Konsole ausgegeben, die scope.date1 $ auf die Auswahl des Datums von Plan geändert wird. Aber die Änderung wird nicht in der HTML-Seite widergespiegelt.

+0

Nach der Verwendung von $ scope. $ Apply() konnte ich das Problem lösen. Aber immer noch, wenn ich irgendwo anders versuche. Es wird nicht funktionieren. –

Antwort

3

eine Richtlinie kann Ihr Problem von ng-Modell nicht aktualisiert

Ihres HTML-Code

<input class="hidden-date-picker" id="hidden-date1" type="hidden" ng-model="date1" customzdatetime /> 

hinzufügen Richtlinie 'customzdatetime' auf Ihren Input-Tag lösen.

app.directive('customzdatetime', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function (scope, element, attrs, ngModelCtrl) { 
      element.datetimepicker({ 
       debug: false, 
       format: 'DD-MM-YYYY', 
       maxDate: moment() 
      }).on('dp.change', function (e) { 
       ngModelCtrl.$setViewValue(e.date); 
       scope.$apply(); 
      }); 
     } 
    }; 
}); 
Verwandte Themen