Winkelanweisung wird nicht angezeigt

8

Ich habe ein kleines Problem mit einer eckigen Anweisung, die jetzt funktioniert und ich weiß nicht warum. Ich denke, es ist ein ziemlich einfaches Problem, das ich übersehe, vielleicht kannst du mir helfen.

Richtlinie ist wie folgt definiert:

%Vor%

Dann index.cshtml:

%Vor%

Anwendung.js:

%Vor%

Und hier ist controllers.js

%Vor%

Ok bestätigt, dass die Datei directives.js geladen ist, sonst wird application.js über 'unbekanntes Modul' getagt. Es gibt keine Fehlermeldungen in der Konsole, die Sache wird einfach nicht angezeigt. Irgendwelche Ideen?

BEARBEITEN

Wie gesagt, habe ich den Direktivennamen in camelCase geändert, aber immer noch kein Glück:

%Vor%

Und

%Vor%

Aber es zeigt sich noch nichts.

BEARBEITEN

Problem ist, dass angular erwartet, dass ein Objekt an das Attribut übergeben wird und kein String-Literal. Wenn Sie ein Objekt person = {name: 'John'} erstellen, übergeben Sie die Person und schreiben Sie {{person.name}} (vorausgesetzt, wir haben das Attribut person + scope var person ebenfalls benannt).

    
Jochen van Wylick 22.11.2013, 11:16
quelle

5 Antworten

19

Bei der Normalisierung konvertiert Angular den Namen - mit Trennzeichen in camelCase.

Verwenden Sie also camelCase, während Sie die Anweisung in JS angeben:

%Vor%

Geige

    
AlwaysALearner 22.11.2013 11:18
quelle
7

Ich bin mir sicher, dass Sie das bereits herausgefunden haben, aber wenn Sie Ihre Scope-Definition ändern, damit der Name

lautet %Vor%

Sie können dann eine Zeichenfolge übergeben. Das '@' interpoliert das Attribut, während '=' es bindet. Außerdem müssen Sie keinen Attributnamen angeben, wenn dieser der Bereichsvariablen entspricht.

    
Gene 12.05.2014 18:02
quelle
6

Das Problem scheint in der Definition der Richtlinie zu liegen. Sie bemerken in Ihrer Frage, dass Angular ein Objekt erwartet; Dies gilt für den Bereich "=", nicht jedoch für den Bereich "@". Im Bereich "@" erwartet Angular nur eine Zeichenfolge. Ich habe unten einen Ausschnitt erstellt.

Zu viele Module

Wenn Sie die Direktive nicht in mehreren Anwendungen wiederverwenden, erstellen Sie kein neues Modul dafür. Fügen Sie die Direktive zu dem Modul hinzu, das Sie für die Anwendung erstellt haben. In meinem Beispiel unten habe ich das Modul mit "angular.module (moduleName)" zurückgerufen ... Wenn nur ein Argument verwendet wird, gibt Angular das vorhandene Objekt zurück, anstatt ein neues zu erstellen. So können wir den Code in viele Dateien aufteilen.

Zu beachtende Dinge

Sie werden folgendes bemerken:

  1. Sie müssen das Modul nicht in die App-Variable laden. Der Singleton jedes Mal aufzurufen ist tatsächlich sicherer und einfacher bei der Speicherverwaltung.
  2. Die Richtlinie ist, wie Sie bereits festgestellt haben, ein Fall von Kamelen.
  3. Ich setze das name-Attribut auf einen String-Wert und nicht auf ein Objekt; Dies funktioniert wegen der Einstellung des Bereichs "@".
  4. Das div ist auf ng-app = 'MyApp' eingestellt. Dies ist normalerweise auf das HTML-Element eingestellt, aber ich wollte mich nicht mit dem DOM in Stack Exchange anlegen. Die ng-app-Direktive kann für jedes Element festgelegt werden, und die diesem Modul zugeordneten Direktiven werden auf alle Elemente angewendet, die sich innerhalb des Bereichs dieses Elements befinden. Ohne die ng-app-Direktive weiß Angular nicht, welches Modul auf der Seite ausgeführt werden soll.

%Vor% %Vor%

Verwenden von Injection

Wenn Sie für jede Direktive oder jeden Controller ein anderes Modul haben, muss jedes in die Moduldefinition der Anwendung eingefügt werden. Dies lässt viel Platz für Fehler. Als optimale Methode sollten Sie bei Bedarf nur ein neues Modul erstellen und das Modul zu einem Container für eine Gruppe verwandter Funktionen und nicht für ein einzelnes Element machen.

Der folgende Code zeigt die korrekte Injektion.

%Vor% %Vor%

Halte es einfach. Definieren Sie Ihre Anweisungen auf einem einzigen Modul für Ihre Anwendung. Sobald Sie dies getan haben und arbeiten, wenn Sie die Anweisungen in einer anderen Anwendung erneut benötigen, refaktorisieren und experimentieren Sie mit Injektionen zu dieser Zeit, nachdem Sie etwas mehr Angular Praxis unter Ihrem Gürtel haben.

Du hast eine glänzende Zukunft mit Angular, mach weiter so!

    
Jared Clemence 11.04.2016 17:24
quelle
4

Ihre Anweisung muss mit Kamelen versehen sein

%Vor%

Dann sind Sie in Ihrem HTML frei, ob Sie es my-directive oder myDirective

nennen

Beide sind gültig

%Vor%     
Muhammad Reda 22.11.2013 11:21
quelle
1

Um dies zu verfolgen, musste ich den folgenden Weg nutzen, um meine Anweisung zum Laufen zu bringen.

%Vor%     
csharpsql 23.01.2015 11:56
quelle