web-dev-qa-db-fra.com

Directives AngularJS en erreur de sortie - Impossible de lire la propriété 'compiler' de non définie

Débutant à AngularJS et en essayant de créer une directive simple. Le code échoue avec un TypeError: Impossible de lire la propriété 'compiler' de non définie. Toutes les suggestions seraient grandement appréciées. 

JS

var xx = angular.module('myApp', []);
xx.directive('myFoo', 
             function(){
                 return 
                 {
                     template:'23'
                 };                     
});

HTML

<div ng-app="myApp">
<div my-foo></div>
</div>

Vous pouvez trouver le code et l'erreur ici https://jsfiddle.net/p11qqrxx/15/

javascriptangularjsangularjs-directive
11
user275157

C'est juste votre déclaration de retour.

Mal:

return 
{} // This returns undefined, return is odd and doesn't look at the next line

Bien:

return{
} // Returns an empty object, always open your object on the same line as the return

Meilleur:

var directive = {};
return directive; // How I always do it, to avoid the issue.
34
Dylan Watt

Ce n'est pas un problème de Angular, mais c'est la façon dont les syntaxes de retour en javascript sont écrites et exécutées. J'ai créé une vidéo simple qui illustre ce problème plus en détail. Vous pouvez voir cette vidéo à partir de ce lien. 

https://www.facebook.com/shivprasad.koirala/videos/910570055693818/

Maintenant pour la réponse longue. En javascript, "return" et "return;" sont identiques et "{}" est une fonction anonyme.

Lorsque vous écrivez return et "{" à la ligne suivante, ses deux instructions, l'une retourne, et le "{}" est une fonction anonyme. Le programme revient de la syntaxe "return" et le code situé entre les crochets n'est jamais exécuté ou nous pouvons dire c'est un code inaccessible. Alors, il retourne "indéfini".

return  // returns from this step itself
{
  // any code here will never execute
 // unreachable code
}

Lorsque vous écrivez l'accolade juste après la déclaration de retour, elle les traite comme un bloc de code et exécute également le code à l'intérieur de l'accolade.

return{
// any code here will execute
}

Il s’agit donc de savoir où se trouve votre accolade après la déclaration return.

1
Shivprasad Koirala

xx.directive ('myFoo',

function () { var obje = { restrict: 'A', // par défaut, il n'est pas nécessaire de le déclarer. '. template:' 23 ' retour obje; } });

0
ravinder

Vous avez également évoqué AngularJs 1.0.0 qui était trop vieux, je l’ai mis à jour à 1.1

Changer la directive en ceci

xx.directive('myFoo',

function () {
    return {
        restrict: 'A', //defaults its A no need of it to declare.
        template: '23'
    };
});

Travailler Fiddle

0
Pankaj Parkar