2016-12-10 3 views
0

Ich habe ein aktuelles Projekt auf Basis von Single-Page-Anwendungen (SPA) und wollte eine Funktion implementieren, die dynamisch Anweisungen in meine HTML lädt, basierend auf welcher Art von SPA erforderlich ist.

Der entsprechende Code für das heißt:

  1. der Teil meines Controller, der die Richtlinie

    function checkSpaType(x) { 
    if (x === "quiz") { 
        const directivePosition = document.getElementById("spa"); 
        directivePosition.append($compile("<quizSPA></quizSPA>")($scope)); 
        }; 
    }; 
    
  2. die Richtlinie selbst

    function quizDirective() { 
    return { 
        templateUrl: "templates/quizSPA.html", 
        controller: 'quizCtrl', 
        link: function quizSPA() {} 
         } 
    } 
    

laden soll und natürlich tut es nicht wor k wie geplant. Nachdem ich die Skripte ausgeführt habe, ist die einzige Sache, die in meinem HTML geladen wird, die Nachricht "[object HTMLUnknownElement]]" iam sehr sicher, dass eckle meine Anweisung nicht finden kann, aber wie mache ich sie sichtbar?

Auch der Vorlagenordner befindet sich im selben Ordner wie meine index.html von wo die Website startet. Das sollte also kein Problem sein. Genauso habe ich schon versucht, die Tags umzubenennen, die ich im html lade, leider ohne Wirkung.

Jeder hat eine Idee?

+0

Okay, ich das Problem atleast Teil fand nach einigem Graben. Mein Skript findet die Direktive auf jeden Fall. Ich habe meinen Code geteilt und das $ compile in einer Variablen gespeichert, die Variable protokolliert und erst dann die Variable an meinen HTML angehängt. Während immer noch nur die Nachricht "[[object HTMLUnknownElement]]" in meinen HTML-Code geladen wird, hat das Eingraben in das Protokoll Früchte getragen. Das Protokoll zeigt, dass die protokollierte Variable, die später angehängt wird, childnodes enthält, die meine Direktive enthalten. Also muss das Problem sein, dass entweder kompiliert nicht als angenommen oder append nicht anhängen, wie angenommen. –

Antwort

0

Ich habe es jetzt selbst behoben.

Hatte sich ändern:

directivePosition.append($compile("<quiz-s-p-a></quiz-s-p-a>")($scope)) 

zu:

const spaDirective = $compile("<quiz>")($scope); 
     directivePosition.append(spaDirective[0]);  
Verwandte Themen