Login

Till · Registriert seit: 31.12.2015 | Themen: 49 | Beiträge: 194

Hallo,
bin relativ neu bei AngularJS, möchte mehr lernen und das framwork gerne verwenden.
Vorneweg: Laut docs soll pro HTML Document nur EINMAL ng-app verwendet werden.
Um diese Einschränkung zu umgehen verwende ich die directive http://stackoverflow.com/questions/22548610/can-i-use-one-ng-app-inside-another-one-in-angularjs und den ng-modules Ansatz (bei mir ng-flow): https://github.com/luisperezphd/ngModule/blob/master/angular.ng-modules.js
Sieht nun bei mir so aus: https://github.com/frdl/-Flow/blob/master/api-d/4/js-api/library.js/core/plugin.flow.js
Die Funktion frdl.UI.widget ist hier der entscheidende Part?

Zum Problem: Wenn ich die Seite das erste mal lade, alles OK.
Wenn ich die Seite nochmal lade (per Linkklick z.B.), werden die angular templates nicht korrekt kompilliert.
Wenn ich dann den Browsercache lösche und neu lade, oder nach einer Weile neu lade geht es wieder.
Kann jemand das Problem nachvollziehen:
http://shell.frdl.de/?test=component&component=webfan/marketplace
oder ein anderes Beispiel:
http://shell.frdl.de/?test=component&component=webfan/nachrichten

Meine These ist, das Template wird zu früh (und damit erfolglos) kompilliert, wenn das js-angular-modul noch nicht geladen ist?

Problematisch scheint auch zu sein, wenn ich, wie zunächst beabsichtigt, nicht einzelne angular.module erstelle sondern nur controller und directives dem bereits geladenen "Haupt-" Modul hinzufüge!?

Irgendwie scheine ich dem Problem auf der Spur, mir fehlt aber wohl noch die entscheidende Einsicht.

Viele Grüße
Till

Edit: Dabei macht es einen Unterschied, ob ich in die Browserleiste klicke und Enter drücke, oder den Browser-refresh-btn klicke um die Seite neu zu laden?

Edit: Mh, klappt nur bedingt, bzw. wenn die Seite geladen wurde muß ich wieder "ganz manuell" bootstrappen?

Till · 27.01.2016, 22:10

Ich glaube ich habe die Lösung, zumindest kann ich so asynchron module bootstrappen und laden:
- Ich mache die initNgFlows Funktion global verfügbar:

Code:

frdl.UI.Compile = function(){

    frdl.ready(function(){

        angular.element(document).ready(function() {

               initNgFlows(document);

        });

   });      

 };

Wenn ich ein neues Modul geladen habe rufe ich frdl.UI.Compile(); auf.
Zuvor hatte mich der Fehler daran gehindert: "App Already Bootstrapped with this Element"
Durch Abnderung der Funktion initNgFlows kann ich den Fehler abfangen:

Code:

for(var i = 0; i < moduleElements.length; i++) {

        //...

 if( frdl.hasScope(moduleElement) )continue;

 angular.bootstrap(moduleElement, module);

Wenn das Element die Klasse ng-scope besitzt ist das Element bereits bootstrapped.
Das wars, so einfach. (Wenn ich nichts übersehen habe...)

Code:

frdl.hasScope = function(element){

      return ($(element).hasClass('ng-scope')) ? true : false;

 };

Till · 04.11.2016, 23:31

Meine "Widget.Engine" erfüllt nun diese Aufgabe "perfekt".
Falls jemand das gleiche Problem hat, besonders hilfreich ist auch:

Code:

$(element).data('$injector', '');

Damit ist das Element im Zweifel wieder bootstrapable.
https://github.com/frdl/-Flow/blob/master/cdn/frdl/flow/ui/frdlui.js#L1618
https://github.com/frdl/-Flow/blob/master/cdn/frdl/flow/ui/frdlui.js#L1567

Login
Benutzername/E-Mail:
Passwort:	Passwort vergessen?
	Merken