Verwenden eines jQuery-Plugins in einer AngularJS-Ansicht

Question

Ich arbeite an meinem ersten AngularJS-Projekt. Ich liebe es so weit, aber ich bin jetzt aufgelegt.

Mein Projekt ist so strukturiert, dass ich eine einzelne ng-Ansicht in meiner index.html habe, die mit einer separaten HTML-Vorlage/teilweise basierend auf der aktuellen Route gefüllt wird.

In einem der partials ich die jQuery DateFormat plugin verwenden möchten eine SQLite-Datetime-Zeichenfolge zu formatieren, die in die Schablone/Teil mit einem Winkel Ausdruck analysiert wird:

{{ find.addDate }} 

Ich habe das Plugin im Lieferumfang einen Script-Tag in index.html und ich dachte, von dort wäre es so einfach sein wie so etwas in meiner Vorlage/Teil tun:

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

Oder vielleicht:

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

Das funktioniert nicht (ich bin sicher, es ist offensichtlich, warum zu einigen von Ihnen), aber es gibt keinen Fehler in der Konsole, und ich bin ziemlich ratlos darüber, wie man es angehen. Ich habe mit Begriffen wie "Third Party Scripts in eckig" oder "jquery plugin angularjs" usw. gegoogelt, kann aber keine aktuellen Codebeispiele finden, um dies richtig zu machen.

Ich habe etwas älteren Code mit angular.widget gefunden, aber es scheint, dass in den 1.0+ Versionen veraltet ist. Ich denke, ich muss eine Richtlinie verwenden, aber ich kann es nicht genau herausfinden.

Ich hoffe wirklich auf eine Erklärung oder ein einfaches Beispiel bitte. Danke vielmals!

Answer 1

Das Problem ist, wenn Sie {{Expression}} in einer Vorlage, es auf den aktuellen Bereich auswertet.

Zum Beispiel, wenn Sie diesen Controller haben:

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

{{find.addDate}} in Wirklichkeit aussehen würde für $scope.find.addDate und bewertet es (in diesem Fall der Rückkehr 2030). Wenn Sie versuchen, {{ $.format.date(find.addDate, "dd/MM/yyyy") }} zu tun, sucht eckig nach $scope.$.format.date(find.addDate, "dd/MM/yyyy"), die nicht existiert.

Probieren Sie etwas wie dies stattdessen eine Funktion in Ihrem Controller:

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

Und dann können Sie in Ihrem HTML tun können Sie tun: {{formatDate(find.addDate, "dd/MM/yyyy")}}.

Man könnte es auch als Filter in Ihrem Markup bewerten, da es dauert nur einen Eingang und ändert es: {{find.addDate | formatDate:"dd/MM/yyyy"}}