wake-up-neo.com

Nicht erfasster ReferenceError: Winkel ist nicht definiert

Ich versuche, eckig zu lernen, und ich habe Schwierigkeiten mit einem einfachen Klick.
Ich folgte einem Beispiel, das einen identischen Code zu dem folgenden Code hat.

Das Ergebnis, nach dem ich suche, ist das Klicken der Schaltfläche, um eine Warnung auszulösen. Es gibt jedoch keine Antwort auf das Klicken der Schaltfläche. Hat jemand Ideen? 

<html lang="en" ng-app="myApp" >
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
    <div >
        <button my-directive>Click Me!</button>
    </div>

    <script>
        var app = angular.module('myApp',[]);

        app.directive('myDirective',function(){

            return function(scope, element,attrs) {
                element.bind('click',function() {alert('click')});
            };

        });
    </script>

    <h1>{{2+3}}</h1>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  -->
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>
javascriptangularjsbuttonangularjs-directive
44
Calgar99

Sie müssen Ihren Winkel-App-Code unter die Aufnahme der Winkelbibliotheken verschieben. Zum Zeitpunkt der Ausführung Ihres Winkelcodes ist angular noch nicht vorhanden. Dies ist ein Fehler (siehe Konsole der Dev Tools).

In dieser Zeile:

var app = angular.module(`

sie versuchen, auf eine Variable namens angular zuzugreifen. Überlegen Sie, warum diese Variable existiert. Das befindet sich im Drehbuch von angle.js, das zuerst eingefügt werden muss.

  <h1>{{2+3}}</h1>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  -->
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>

      <script>
        var app = angular.module('myApp',[]);

        app.directive('myDirective',function(){

            return function(scope, element,attrs) {
                element.bind('click',function() {alert('click')});
            };

        });
    </script>

Der Vollständigkeit halber ist es richtig, dass Ihre Direktive der bereits vorhandenen Direktive ng-click ähnelt. Ich glaube jedoch, dass es bei dieser Übung nur darum geht, das Schreiben einfacher Direktiven zu üben.

71
m59

Verwenden Sie die ng-click-Direktive:

<button my-directive ng-click="alertFn()">Click Me!</button>

// In <script>:
app.directive('myDirective' function() {
  return function(scope, element, attrs) {
    scope.alertFn = function() { alert('click'); };
  };
};

Beachten Sie, dass Sie my-directive in diesem Beispiel nicht benötigen. Sie benötigen lediglich etwas, um alertFn im aktuellen Bereich zu binden.

Update : Sie möchten auch, dass die Winkelbibliotheken vor Ihrem <script>-Block geladen werden.

5
jkinkead

Nur um die richtige Antwort von m59 zu ergänzen , hier ist eine funktionierende jsfiddle :

<body ng-app='myApp'>
    <div>
        <button my-directive>Click Me!</button>
    </div>
     <h1>{{2+3}}</h1>

</body>
3
zszep

ich habe vergessen, meinem HTML-Code die folgende Zeile hinzuzufügen, nachdem das Problem behoben wurde.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
0
saigopi

Wie Sie wissen, angular.module (deklariert unter angle.js file.So, bevor Sie auf angle.module zugreifen, müssen Sie es mit <script src="lib/angular/angular.js"></script> (in Ihrem Fall) verfügbar machen. Danach können Sie angular.module aufrufen. Es wird funktionieren.

mögen

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
<!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  -->
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>

    <script>
        var app = angular.module('myApp',[]);

        app.directive('myDirective',function(){

            return function(scope, element,attrs) {
                element.bind('click',function() {alert('click')});
            };

        });
    </script>
</head>
<body ng-app="myApp">
    <div >
        <button my-directive>Click Me!</button>
    </div>
    <h1>{{2+3}}</h1>

</body>
</html>
0
Brajesh