javascript - on jquery

¿Cómo hacer una actualización de directiva ng-model en jquery en caso de evento?

Question

Estoy haciendo una directiva AngularJS para un complemento de selección de fecha jQuery que debería actualizar un modelo ng cuando la fecha de selector de fecha ha cambiado.

Aquí está el código hasta ahora:

angular.module(''bootstrap-timepicker'', []).directive(''timepicker'', [
  function() {
    var link;
    link = function(scope, element, attr, ngModel) {
      element.datetimepicker();

      element.on(''dp.change'', function(event) {
        // update ngModel ?
      });
    };

    return {
      restrict: ''A'',
      link: link,
      require: ''ngModel''
    };
  }
]);

¿Cómo puedo actualizar ngModel en el evento ''dp.change'' teniendo en cuenta que el alcance, elemento, attr, ngModel no están disponibles cuando se llama al evento?

¡Gracias!

Answer 1

Eche un vistazo a esta demo http://jsfiddle.net/TheRodeo/taujuuq2/3/ esto podría darle una idea de cómo proceder

Answer 2

Esto es seguro de que cualquier complemento que se haya agregado a angular no actualiza el ng-model de alcance angular, debemos hacerlo manualmente en su evento de cambio jquery. En angular jquery, el complemento siempre debe vincularse a DOM usando la directiva, porque la directiva proporciona un buen control sobre un DOM.

Como usted preguntó en su pregunta que ngModel , element y scope object no están disponibles dentro del evento dp.change de datetimepicker , no creo que esto sea posible dentro de la función de enlace de directiva, debe haber hecho algo más o usted faltó a explicar en la pregunta.

Y para actualizar el modelo ng del selector de fechas, debe agregar el código siguiente en su evento dp.change

element.on(''dp.change'', function(event) {
  //need to run digest cycle for applying bindings
  scope.$apply(function() {
    ngModel.$setViewValue(event.date);
  });
});

En el código anterior recuperamos la fecha actualizada del objeto de evento, luego la asignamos al $viewValue ( valor de cadena real en la vista ) de ng-model , luego para actualizarlo en cualquier otro lugar donde se haya utilizado esta variable ng-model necesitamos ejecutar el ciclo de resumen manualmente usando $apply() en el alcance de la función de enlace de directiva. La razón detrás de la ejecución del ciclo de resumen es que necesitamos insertar ese valor dentro ng-model variable ng-model $modalValue ( El valor en el modelo al que está vinculado el control ).

Plunkr de trabajo

Avíseme si necesita algo más, le daré ese detalle, gracias.