2015-04-07 51 views
13

Kullanıcı, tarihi değiştirdikten sonra bir şeyler yapmaya çalışıyorum. ama ng değişimin göz ardı edildiği gibi görünüyor. İşte benim kod örneğim:Bootstrap datepicker değişiklik olayı nasıl yakalanır?

<input ng-change='changedate()' 
         type="text" 
         starting-day="2" 
         show-button-bar="false" 
         show-weeks="false" 
         class="form-control addTicketDateInput" 
         datepicker-popup="dd MMM" 
         ng-model="startdate" 
         is-open="openstart"       
         datepicker-options="dateOptions"   
         ng-required="true" 
         close-text="Close" /> 
in my controller: 
$scope.changedate=function(){ 
    console.log($scope.startdate); 
} 

Herhangi bir fikrin var mı?

+1

Çalışması gerektiğini düşünüyorum, http://plnkr.co/edit/QbtoD2ND46ceoDOXes9x?p=preview, ilk datepicker'ı tıklatıp konsol çıktısını denetle – ABOS

cevap

15

Sen $scope değişti göz kulak olabilir. Böyle

şey:

$scope.startdate; 

$scope.$watch("startdate", function(newValue, oldValue) { 
    console.log("I've changed : ", startdate); 
}); 
3

Bunu daha önce yaptığım şekilde, datepicker jQuery öğelerini açısal bir yönergelere sarmak gerekir. Bu kaba ama burada fikir:

app.directive('dateDirective', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      onChange: '&' 
     }, 
     link: function(scope, element, attrs) { 
      element.datetimepicker({ 
      format: "MM-yyyy" 
      //all your options here 
      }).on('changeDate', function(e) { 
      scope.$apply(function(scope) { 
       scope.onChange(e.date); 
      }); 
      }); 
     } 
    }; 
}); 

jQuery öğeden değişim olayını yakalamak ve denetleyici bir işlevi çağırmak için kullanabilirsiniz, ya da sadece kapsam değerlerini ya da her neyse ayarlamak için kullanabilirsiniz:

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

app.controller('myAppCtrl', function($scope) { 
    $scope.current = ''; 
    $scope.changedate = function(date){ 
    $scope.current = date; 
    }; 
}); 

Sonra sadece dom elemana direktifini eklemeniz gerekir:

01:

<input date-directive 
        type="text" 
        starting-day="2" 
        show-button-bar="false" 
        show-weeks="false" 
        class="form-control addTicketDateInput" 
        datepicker-popup="dd MMM" 
        ng-model="startdate" 
        is-open="openstart"       
        datepicker-options="dateOptions"   
        ng-required="true" 
        close-text="Close" /> 

Sonra hangi kapsam fonksiyonu çağırmak için bunu söylemek

<input date-directive onChange='changedate(date)' 
        type="text" 
        starting-day="2" 
        show-button-bar="false" 
        show-weeks="false" 
        class="form-control addTicketDateInput" 
        datepicker-popup="dd MMM" 
        ng-model="startdate" 
        is-open="openstart"       
        datepicker-options="dateOptions"   
        ng-required="true" 
        close-text="Close" /> 

Bunun çok sert olduğunu söylediğim gibi. Bu yardımcı olmazsa test edilen bir örnek kazarım.

Bu yardımcı olur umarım!

da, halpful olabilir burada bir datepicker direktifi var:

https://angular-ui.github.io/bootstrap/

+0

Çalışma örneğini nerede bulabilirim biliyor musunuz? – Tuco

2

Basit çözüm: Deneyin geçen değeri

html

ng-change="selectDate(dt)"

js

$scope.selectDate = function(dt) { console.log(dt); }

Umarım bu sizin sorununuzu çözer!

İlgili konular