Winkeldirektive nicht angezeigt

Question

Ich habe ein kleines Problem mit einer Winkelanweisung, 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:

angular.module('directives', []) 
    .directive('my-directive', function() { 
     return { 
      restrict: 'AE', 
      scope: { 
       name: '=name' 
      }, 
      template: '<h1>{{name}}</h1>' 
     }; 
    }); 

Dann index.cshtml:

<my-directive name="test"></my-directive> 

application.js:

var app = angular.module('MyApp', [ 
    ..., 
    'directives' 
]); 

Und hier ist controllers.js

angular.module('controllers', ['apiServices', 'directives']) 
    .controller('homecontroller', function($scope, $resource, webApiService, $log, $translate, $localStorage, $sessionStorage) { 

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

---

EDIT

So wie erwähnt, ich habe die Richtlinie Namen camelcase geändert, aber noch kein Glück:

<my-directive name="John Doe"></my-directive> 

Und

.directive('myDirective', function() { 

Aber nichts ist zeige noch.

EDIT

Problem ist, dass ein Winkel Objekt erwartet in das Attribut übergeben werden, nicht eine Stringliteral. 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).

Answer 1

Während Normalisierung, Winkel konvertiert - abgegrenzten Namen zu CamelCase.

So Camelcase verwenden, während die Richtlinie innerhalb JS Angabe:

.directive('myDirective', function() { 

Fiddle

Answer 2

Ihre Richtlinie muss Kamel Gefasste werden

.directive('myDirective', function() { 

dann in Ihrem HTML, Ihre sind frei, ob man es my-directive oder 01 nennt

Beide sind gültig

<my-directive name="test"></my-directive> 
<myDirective name="test"></myDirective> 

Answer 3

Ich bin sicher, dass Sie dies bereits herausgefunden haben, aber wenn Sie Ihren Anwendungsbereich Definition ändern für Namen

scope: { 
    name: '@' 
} 

Sie werden dann in der Lage zu sein eine Zeichenfolge übergeben. Das '@' interpoliert das Attribut, während '=' es bindet. Außerdem müssen Sie keinen Attributnamen angeben, wenn dieser mit der Bereichsvariablen identisch ist.

Answer 4

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

<my-directive name="test"></my-directive> 

Answer 5

Das Problem scheint in der Definition der Richtlinie zu sein. 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

Sofern Sie die Richtlinie in mehreren Anwendungen wiederverwenden, erstellen Sie kein neues Modul für sie. 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.

Things

Sie bemerken den folgenden Hinweis:

1. Sie müssen nicht das Modul in den App-Variable laden. Der Singleton jedes Mal aufzurufen ist tatsächlich sicherer und einfacher bei der Speicherverwaltung.
2. Die Richtlinie ist in Kamelfall, wie Sie bereits bemerkt haben.
3. Ich setze das name-Attribut auf einen String-Wert und nicht auf ein Objekt; Dies funktioniert aufgrund 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-Anweisung weiß Angular nicht, welches Modul auf der Seite ausgeführt werden soll.

//app.js - this defines the module, it uses two parameters to tell the injector what to do. 
 
angular.module('MyApp',[]); 
 

 
//directive.js stored elsewhere 
 
//this calls back the module that has been created. It uses one parameter because the injector is no longer needed. 
 
angular.module('MyApp').directive('myDirective', function() { 
 
     return { 
 
     restrict: 'AE', 
 
      scope: { 
 
      name: '@' 
 
     }, 
 
     template: '<h1>{{name}}</h1>' 
 
     }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    
 
<div ng-app="MyApp"> 
 
<h1>Successful Load</h1> 
 
<my-directive name="test"></my-directive> 
 
<p>By applying the directive definition to the MyApp module, the MyApp module knows to activate the directive within this scope. In this form, it does not get injected.</p> 
 
</div>

Injection Mit

Wenn Sie ein anderes Modul für jede und jeder Richtlinie oder Controller verfügen, muss jeder in der Moduldefinition der Anwendung injiziert 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 zu einem einzelnen Element machen.

Der folgende Code zeigt die ordnungsgemäße Injektion.

angular.module("MyApp", ['ReusableDirectives']); 
 
angular.module("MyApp").directive("myDirective", function(){ 
 
    return { 
 
    restrict: "AE", 
 
    scope: { name: "@" }, 
 
    template: "<p>This is the directive I defined in the example above. It uses <u>the same module</u> as my main application, because it is not going to be reused over and over again. In fact, I will need it just for this application, so I don't need to complicate things with a new module. This directive takes an attribute called 'name' and if it is a string allows me to manipulate the string within my templates scope to do things like this: {{'hello ' + name + '!'}}</p>" 
 
    }; 
 
}); 
 
angular.module("ReusableDirectives", []); 
 
angular.module("ReusableDirectives").directive("reusableDirective", function(){ 
 
    return { 
 
    restrict: "E", 
 
    template: "<p>This is a directive that I intend to use in many, many applications. Because I will reuse it so much, I am putting it in a separate module from my main application, and I will inject this directive. This is the only reason that this directive is not in the same module as the one I defined above.</p>" 
 
    }; 
 
}).directive("reusableDirective2", function(){ 
 
    return { 
 
    restrict: "E", 
 
    template: "<p>This is a second directive that I intend to use in multiple applications. I have stored it in a module with the first directive so that I can freely inject it into as many apps as I like.</p>" 
 
    }; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="MyApp"> 
 
    <h1>Successful Load</h1> 
 
    <my-directive name="Johnny"></my-directive> 
 
    <p>By applying the directive definition to the MyApp module, the MyApp module knows to activate the directive within this scope. In this form, it does not get injected.</p> 
 
    <h3>Injected Directives</h3> 
 
    <reusable-directive></reusable-directive> 
 
    <reusable-directive2></reusable-directive2> 
 
</div>

Keep it simple. 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 zu diesem Zeitpunkt mit Injektionen, nachdem Sie etwas mehr Angular Praxis unter Ihrem Gürtel haben.

Sie haben eine gute Zukunft mit Angular, weiter so!