Mam ciąg do filtrowania daty w moim zakresie.

$scope.myModel = {date:""};

Mam też datepicker jQuery

<input date-value="myModel.date" date-picker />

Które aktualizuje ten ciąg w dyrektywie (przy użyciu AngularJS - Zmiana Wartość atrybutu )

.directive('datePicker', function ($timeout) {
  return {
    scope: {
      dateValue: "=?",
    },
    link : function (scope, elem, attrs) {
      $timeout(function() {
        elem.data('date-value', scope.dateValue);
        elem.bind('change paste', function (blurEvent) {
          if (elem.data('date-value') != elem.val()) {
            console.log('value changed, old value is:' + elem.data('date-value') +'new value is: ' + elem.val());
            elem.data('date-value', elem.val());
            scope.dateValue = elem.val();
          }
        });
      });
    },

  };
});

Data zakwaterowania głównego jest poprawnie aktualizowana i mogę pomyślnie wysłać go do sever, ale chcę coś zrobić, gdy data się zmienia. Moja funkcja zostaje wywołana raz na inicjalizacji strony, a następnie nigdy nie robi ponownie.

$scope.$watch("myModel.date", function(newVal, oldVal) {
  console.log("newVal: " + newVal + '  oldVal:' + oldVal);
  if (newVal == oldVal) {
    return;
  }
  // do something 
});

Co ja tu robię źle?

1
James 6 luty 2015, 03:34

2 odpowiedzi

Najlepsza odpowiedź

Czytałem w innej postaci przelewowej postu, że można wymusić kontrole na swoim zakresie poprzez zakres Więc to działa, ale nie wiem wystarczająco dużo o kątach i trawienia, aby wyjaśnić dlaczego.

elem.bind('change paste', function (blurEvent) {
          if (elem.data('date-value') != elem.val()) {
            console.log('value changed, old value is:' + elem.data('date-value') +'new value is: ' + elem.val());
            elem.data('date-value', elem.val());
            scope.dateValue = elem.val();
            if (!scope.$$phase) {scope.$apply();}
          }
        });

W każdym razie wydawało się to zbyt zawiłe, a element wiąże się wywołując, gdy kliknąłem do pudełka, zanim skończyłem wybrać. Skończyło się skończyć z konfigurowaniem połączenia funkcji na OnClose na jQuery datePicker params.

datePickerParams = {
    controlType     : "select",
    timeFormat      : "hh:mm TT",
    onClose         : function(dateText, inst) {
                          $scope.myModel.dateText = dateText;
                          // do stuff
                      }
};

A potem przechodząc do dyrektywy.

.directive('datePicker', function ($timeout) {
  return {
    scope: {
      datetimePickerParams: "=",
    },
    link : function (scope, elem, attrs) {
      $timeout(function() {
        elem.datetimepicker(scope.datetimePickerParams)
      });
    },
  };
});

(Może nadszedł czas, aby sprawdzić sukienniki daty kątowej i odejść od jQuery.)

1
James 7 luty 2015, 00:24

Czy próbowałeś zadzwonić do $ Watch z prawdą jako trzeci argument?

$scope.$watch("myModel.date", function(newVal, oldVal) {
  console.log("newVal: " + newVal + '  oldVal:' + oldVal);
  if (newVal == oldVal) {
    return;
  }
  // do something 
}, true);

Spowoduje to sprawdzenie równości wartości niż równości odniesienia.

Sprawdź Dokumentacja dla $ Watch tutaj, aby zrozumieć rolę trzeciego parametru [Obrócenie]. Zasadniczo ustawienie go do prawdziwych przyczyn = & gt; "Porównaj o równość obiektów za pomocą kątowego. Zamiast w porównaniu do równości odniesienia".

Co więcej, prawdopodobnie lepiej byłoby oglądać flagę boolowską niż obiekt. Przełącz flagę boolowską na zmianę swojego "mymodel.date" i oglądaj tę flagę. To zmniejszyłoby to napowietrzność - sprawdzanie obiektu jest drogie niż sprawdzanie flagi boolowskiej.

Mam nadzieję że to pomoże!

0
amitthk 6 luty 2015, 05:30