Verwenden Sie Angular nur in der Seite geladen über Ajax

<html> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script> 
</head> 
<body> 
    <div id="ajax-content-here"> 

    </div> 
</body> 
</html>

Ich bin wirklich neu zu eckig also bitte sei sanft!Verwenden Sie Angular nur in der Seite geladen über Ajax

Also die Idee ist wie oben im Titel angegeben - ich lade meine Seite mit eckigen Bibliothek im Kopfbereich enthalten. Später lade ich Daten (unten) mit ajax (jquery) in den div-Container.

<div id="angular-test"> 
    <div> 
     <label>Name:</label> 
     <input type="text" ng-model="yourName" placeholder="Enter a name here"> 
     <hr> 
     <h1>Hello {{yourName}}!</h1> 
    </div> 
</div>

Ich möchte irgendwie die Winkel initialisieren aktiv innerhalb #angular-test Behälter nur zu sein, nachdem Ajax-Anforderung abgeschlossen ist. Ich nehme an, es hat etwas mit Scope-Objekt zu tun, oder?

Danke!

Quelle

2013-06-03 Krabats

Sie sollten mit dem Lesen dieser beginnen: http://StackOverflow.com/Questions/14994391/How-Do-I-think-in-angularjs-IFI-Have -a-jquery-background – TheHippo

Ich habe das tatsächlich gelesen, aber in meinem Fall erstelle ich einen neuen Abschnitt in einem riesigen Projekt und ich würde eckig nur in diesem Abschnitt verwenden. Da es momentan nicht möglich ist, alles von Grund auf mit eckigen neu zu schreiben, möchte ich klein anfangen. Es sollte möglich sein, oder? Es gibt keine Möglichkeit, dass jemand dieses Problem zuvor nicht hatte. – Krabats

Verwenden Sie benutzerdefinierte schriftliche Anweisungen oder das gesamte "Routing-Paket", um Ajax-HTML-Code zu verwenden. Klingt immer noch nach einer schlechten Idee. – TheHippo

Angular führt die Initialisierung durch (einschließlich der Suche nach der Zusammenstellung von ng-apps und Vorlagen), sobald das DOM beendet ist (beim DOMContentLoaded-Ereignis). Angular hat keine Möglichkeit zu wissen, dass das DOM geändert wird, und eine ng-app wird dem DOM später hinzugefügt, sobald die AJAX-Antwort empfangen wurde.

So können Sie versuchen, Bootstrap manuell zu initialisieren, nachdem das DOM wirklich finalisiert wurde (das ist auf Ihrem jquery Ajax Callback, nachdem Sie zu innerHTML zuweisen). In der Callback etwas tun, wie folgt aus:

angular.bootstrap($('#ajax-content-here'));

Unter der Annahme, dass der Inhalt innerhalb ajax-content-here bis zu einem gewissen ng-app bezieht. Werfen Sie einen Blick auf die manuelle Initialisierung Abschnitt http://docs.angularjs.org/guide/bootstrap

Quelle

2013-06-03 19:59:31 thesamet

<div ng-app id="angular-test">

Das wird ng-app Teil innerhalb angular-test Winkel initialisieren.

Quelle

2013-06-03 14:36:09 MaxWillmo

Ich bezweifle, dass es von Angular initialisiert wird, wenn es mit AJAX geladen wird ([demo] (http://plnkr.co/edit/bUYMoRFUjOlRF1VgnDVr?p=preview)). – robertklep

Ich habe diesen Ansatz auch zuerst versucht, aber nein. – Krabats

Verwenden Sie Angular nur in der Seite geladen über Ajax

Antwort

Verwandte Themen