Javascript Girl
  1. Javascript Girl
  3. Uncaught ReferenceError: angulaire n'est pas défini – AngularJS ne fonctionne pas
Intereting Posts
Vidéo de fond HTML5 randomisée en page charger / actualiser Comment obtenir la valeur RVB d'une image dans une page à l'aide de javascript? Uncaught Typeerror: ne peut pas lire la propriété 'innerHTML' de null D3js Arbre carré Définir la famille de polices via style.font ne fonctionne pas, sauf si la taille de la police est également définie La fonction onClick provoque l'erreur "Uncaught SyntaxError: Inattendu token}" Toastr JS Setting fadeAway value Définir la police Les icônes fantastiques comme curseur – est-ce possible? Obtenir les coordonnées X et Y pour un élément div Comment puis-je me concentrer sur un champ de saisie lors de la chargement d'une page de partage de téléphone? L'expression régulière donne une sortie différente dans FF et IE Comment puis-je passer la portée du contrôleur au service dans angularjs? Changement de mot de passe de Google oauth 2.0 API Nom d'utilisateur et mot de passe non acceptés Marco illustrddMMMM Aj portfólioFMMMMM TrauseFMMMMMM DaHMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM Javascript: temps rond UP plus proche 5 minutes

Uncaught ReferenceError: angulaire n'est pas défini – AngularJS ne fonctionne pas

Je tente d'apprendre angulaire et je suis en difficulté avec un simple clic de bouton. J'ai suivi un exemple qui a un code identique comme ci-dessous. Le résultat que je recherche est pour appuyer sur le bouton pour provoquer une alerte. Cependant, il n'y a pas de réponse au clic de 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>

Vous devez déplacer votre code d'application angulaire sous l'inclusion des bibliothèques angulaires. Au moment où votre code angulaire fonctionne, l' 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 tentez 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 l'exhaustivité, il est vrai que votre directive est similaire à la directive déjà existante ng-click , mais je crois que le but de cet exercice est simplement de pratiquer l'écriture de directives simples, ce qui est logique.

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 juste besoin de quelque chose pour lier alertFn sur la portée actuelle.

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

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

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