Uso de un complemento jQuery en una vista AngularJS

Question

Estoy trabajando en mi primer proyecto AngularJS. Me encanta hasta ahora, pero ahora estoy colgado.

Mi proyecto está estructurado de modo que tengo una vista ng única en mi index.html que se rellena con una plantilla HTML/parcial separada basada en la ruta actual.

En uno de los parciales que me gustaría usar el jQuery DateFormat plugin para dar formato a una cadena de SQLite de fecha y hora que se analiza en la plantilla/parcial usando una expresión angular:

{{ find.addDate }} 

He incluido el plugin con una etiqueta de script en index.html y pensé que a partir de ahí sería tan simple como hacer algo como esto en mi plantilla/parcial:

{{ $.format.date(find.addDate, "dd/MM/yyyy") }} 

O tal vez:

{{ angular.element.format.date(find.addDate, "dd/MM/yyyy") }} 

Eso no está funcionando (estoy seguro de que es obvio por qué para algunos de ustedes), pero no hay ningún error en la consola y estoy bastante perplejo sobre cómo abordarlo. He hecho algunas búsquedas en Google con términos como 'scripts de terceros en angular' o 'jquery plugin angularjs', etc. pero no puedo encontrar ejemplos de códigos recientes sobre cómo lograr esto de la manera correcta.

Encontré un código anterior usando angular.widget, pero parece que ha quedado obsoleto en las versiones 1.0+. Creo que necesito usar una directiva, pero no puedo resolverlo exactamente.

Realmente espero una explicación o un ejemplo simple por favor. ¡Muchas gracias!

Answer 1

El problema es cuando haces {{expression}} en una plantilla, la evalúa en el alcance actual.

Por ejemplo, si usted tiene este controlador:

function MyCtrl($scope) { 
    $scope.find = { 
     addDate: 2030 
    }; 
} 

{{find.addDate}} sería en realidad para ver $scope.find.addDate y evaluarlo (en este caso devolver 2030).

Por lo tanto, cuando intenta hacer {{ $.format.date(find.addDate, "dd/MM/yyyy") }}, angular busca $scope.$.format.date(find.addDate, "dd/MM/yyyy"), que no existe.

intentar algo como esto en su lugar, utilizando una función en el controlador:

function MyCtrl($scope) { 
     $scope.find = { 
      addDate: 2030 
     }; 
     $scope.formatDate = function(input, format) { 
      return $.format.date(input, format); 
     } 
    } 

Y entonces usted puede hacer en su html que puede hacer: {{formatDate(find.addDate, "dd/MM/yyyy")}}.

También se puede evaluar como un filtro en su margen de beneficio, ya que sólo se necesita una entrada y lo cambia: {{find.addDate | formatDate:"dd/MM/yyyy"}}