Ausführungszeit zwischen Angular und JQuery

Question

Ich habe eine Seite, die durch Angular dynamisch bevölkert ist. Im Wesentlichen macht Angular eine $http.get Anfrage an das Backend, um die Daten zu erhalten und Attribute eines Controllers zu füllen.

Zum Beispiel rufe ich $http.get('/_car_data') an und der JSON, der zurückgegeben wird, wird in meinem Controller Dealership als Dealership.cars gespeichert.

Durch Angular, gebe ich dann alle Dealership.cars als Eingabefelder in meiner HTML-Seite aus.

Mein Problem ist, dass ich eine jquery 'Autocomplete' zu jeder Eingabe hinzufügen möchte. Dies funktioniert wunderbar, wenn ich es über die Google Developer-Konsole nach der Seite und eckigen vollständig gerendert habe. Wenn ich diese Funktionalität jedoch sowohl nach der Verknüpfung des Skripts mit dem HTML-Code als auch nach dem HTML-Textbereich einschließe, funktioniert es nicht. Es funktioniert auch nicht, wenn ich diese Autocomplete-Funktionalität mit $(document).ready umgeben.

Dies ist die Funktion, die perfekt funktioniert, wenn sie in der Google Developer Console ausgeführt wird, aber nicht nach der extern verknüpften js und dem HTML-Body.

$(document).ready(function() { 

     var availableTags = []; 

     $.ajax({ 
       url: '_available_cars', 
       data: {}, 
       method: 'GET', 
       dataType: 'json', 
       success: function(data) { 
        availableCars = data['cars']; 

        $(".carchoice").autocomplete({ 
         source: availableCars 
        }); 
       }, 
       error: function(jqXHR, textStatus, errorThrown, data) { 
        console.log(textStatus, errorThrown); 
       } 
     }); 
}); 

Also meine Frage ist, wie kann ich warten, bis alle HTML und Winke erstellt, dynamisch geladen Inhalt beendet Rendering meine Jquery-Anweisung auszuführen?

Answer 1

Versuchen Sie link Funktion Agular docs zu verwenden. Diese Funktion wird ausgelöst, wenn die HTML-Vorlage für Ihre Komponente kompiliert wird und Sie Element immer noch nicht mit echtem DOM verknüpft haben. Sie können also versuchen, dieses Element mit jQuery Autocomplete zu manipulieren.

Answer 2

Die beste und einzigartige Art, wie jQuery mit angularjs kommunizieren sollte, sind Direktiven. Ich empfehle dir, jede Art von Abkürzung und Hacks zu vermeiden, es wird mit nur ein bisschen Code zum echten Chaos.

Hier ist meine Suggestion, wie Ihr Problem gelöst werden kann.

angular.module('myApp', []); 

angular.module('myApp').factory('CarService', function ($http, $q) { 
    var cars = []; 

    return { 
     getAvailableCars: function() { 
      if(cars) return $q.resolve(cars); 

      return $http.get('_available_cars').then(function (response) { 

       cars = response.data; 

       return cars; 
      }); 
     } 
    }; 
}); 

angular.module('myApp').directive('carchoice', function(CarService) { 
    return { 
     restrict: 'C', 
     link: function(scope, element, attrs) { 

      CarService 
       .getAvailableCars() 
       .then(function (availableCars) { 

        $(element).autocomplete({ 
         source: availableCars 
        }); 
      }); 
     } 
    }; 
});