web-dev-qa-db-fra.com

Uncaught ReferenceError: angular n'est pas défini - AngularJS ne fonctionne pas

J'essaie d'apprendre angulaire et je lutte avec un simple clic sur un bouton.
J'ai suivi un exemple qui a un code identique à celui ci-dessous.

Le résultat recherché est que le clic du bouton déclenche une alerte. Cependant, il n'y a pas de réponse au clic du bouton. Est-ce que quelqu'un a des idées? 

<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

Vous devez déplacer votre code d'application angulaire sous l'inclusion des bibliothèques angulaires. Au moment où votre code angulaire est exécuté, la variable angular n'existe pas encore. Ceci est une erreur (voir la console de vos outils de développement).

Dans cette ligne:

var app = angular.module(`

vous essayez d'accéder à une variable appelée angular. Considérez ce qui fait que cette variable existe. Cela se trouve dans le script angular.js, qui doit ensuite être inclus en premier.

  <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>

Pour être complet, il est vrai que votre directive est similaire à la directive existante ng-click, mais je pense que le but de cet exercice est simplement de s'exercer à écrire des directives simples, ce qui est donc logique.

71
m59

Utilisez la directive ng-click:

<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'); };
  };
};

Notez que vous n'avez pas besoin de my-directive dans cet exemple, vous avez simplement besoin de quelque chose pour lier alertFn sur l'étendue actuelle.

Update : Vous souhaitez également que les bibliothèques angulaires soient chargées avant votre bloc <script>.

5
jkinkead

Juste pour compléter La réponse correcte de m59 , voici un travail jsfiddle :

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

</body>
3
zszep

j'ai oublié d'ajouter la ligne ci-dessous à mon code HTML après avoir ajouté que le problème a été résolu.

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

Comme vous le savez, angular.module (déclaré dans le fichier angular.js.Alors avant d’accéder à angular.module, vous devez le rendre disponible en utilisant <script src="lib/angular/angular.js"></script> (dans votre cas). Vous pourrez ensuite appeler angular.module.

comme

<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