web-dev-qa-db-fra.com

Erreur: [$ compile: nonassign] L'expression 'undefined' utilisée avec la directive 'myFacebook' est non assignable

J'écris une directive en angularjs et reçois l'erreur mentionnée ci-dessus. J'utilise le code d'un livre. 

.directive('myFacebook', [function(){
return {
    link: function(scope,element,attributes) {
        (function(d) {
                var js, id = 'facebook-jssdk',
                    ref = d.getElementsByTagName('script')[0];
                if (d.getElementById(id)) {
                    return;

                }
                js = d.createElement('script');
                js.id = id;
                js.async = true;
                js.src = "//connect.facebook.net/en_US/all.js";
                ref.parentNode.insertBefore(js, ref);
            }(document));
            // Initialize FB
            window.fbAsyncInit = function() {
                FB.init({

                    appId: 'xxxx', //birthday reminder
                    status: true, // check login status
                    cookie: true, // enable cookies to access the session
                    xfbml: false // parse XFBML
                });
                //Check FB Status
                FB.getLoginStatus(function(response) {
                     xxxx
                });
            };
        scope.username='';
    },
    scope: {
            permissions: '@',
            myFriends: '=friends'
        },
    controller: function($scope) {
        $scope.loadFriends = function() {
            FB.api('/me/friends?fields=birthday,name,picture', function(response) {
                    $scope.$apply(function() {
                        $scope.myFriends = response.data;
                    });
                });
        }
    },

    template:'Welcome {{username}}'
   }}])

Je reçois une erreur à 

 $scope.$apply(function() {
            $scope.myFriends = response.data;
 });

Le code HTML

<div my-facebook></div>
<h1> My Friend's Birthday Reminder</h1>
<div ng-repeat="friend in myFriends">
     {{friend.name}}
</div>
javascriptangularjsangularjs-directive
44
harshit

Le problème est que vous ne définissez pas l'attribut friends dans l'élément de directive <div my-facebook></div>.

Lorsque vous définissez le champ d'application de la directive comme suit:

scope: {
    permissions: '@',
    myFriends: '=friends'
}

Vous dites essentiellement:

  • Lier à la propriété permissions de l'étendue locale la valeur de l'attribut DOM portant le même nom
  • Configurez une liaison bidirectionnelle entre la propriété myFriends de l'étendue locale et la propriété friends de l'étendue parent

Puisque vous ne définissez pas l'attribut friends dans le DOM, Angular ne peut pas créer la liaison bidirectionnelle et renvoie l'erreur. Plus d'informations ici .

Définissez l'attribut friends sur votre DOM et cela devrait résoudre le problème:

<div my-facebook friends="friendList"></div>

Et, par exemple, sur le contrôleur:

app.controller('Ctrl', function($scope) {
  $scope.friendList = [];
});
69
bmleite

Ma solution était plus difficile à trouver ici, mais plus facile à mettre en œuvre. J'ai dû le remplacer par l'équivalent de (le point d'interrogation rend l'attribut facultatif. Avant la version 1.5, cela n'était apparemment pas nécessaire).

scope: {
    permissions: '@',
    myFriends: '=?friends'
}
72
Louis

Ce n’est pas une réponse directe à la question des PO, mais c’est ce qui m’est arrivé à moi, donc à tous ceux qui pourraient utiliser Google cette erreur à l’avenir ... Ceci est similaire à la réponse de JohnP.

Cette erreur peut également apparaître si vous avez un attribut camelCase dans votre directive. 

Donc si vous avez:

<div my-facebook myFriends></div>

Il va jeter l'erreur.

C’est parce que (tiré de l’angle documentation ):

Angular normalise le tag et le nom d'attribut d'un élément pour déterminer quels éléments correspondent à quelles directives. Nous nous référons généralement aux directives par leur nom normalisé camelCase (par exemple, ngModel). Cependant, comme HTML ne fait pas la distinction entre les majuscules et les minuscules, nous référons aux directives du modèle DOM par des formes minuscules, qui utilisent généralement des attributs délimités par des tirets sur les éléments DOM (par exemple, le modèle ng).

Le processus de normalisation est le suivant:

Dénudez x- et data- à l'avant de l'élément/des attributs.

Convertissez le nom délimité par :, - ou _- en camelCase.

alors <div my-facebook myFriends></div>

devra devenir <div my-facebook my-friends></div>

16
Matt Lishman

Je cours à ce même problème et pour moi le problème était les caractères majuscules dans le nom DOM.

<div my-facebook FRIENDS="friendList"></div>

n'a pas fonctionné, mais

<div my-facebook friends="friendList"></div>

travaillé. J'ai passé une journée à travailler là-dessus et j'ai trouvé la solution par accident. 

3
JohnP

J'avais ceci parce que j'ai essayé de mettre à jour une autre variable dans le champ d'application de ma directive mais que je ne l'ai pas passée en HTML même si elle est calculée et qu'elle ne doit pas être passée en HTML

voici un exemple de portée de directive

scope: {
  var1: '=',
  var2: '='
}

dans cette directive, je peux lui passer var1 ou var2 mais pas les deux et la logique de la directive trouvera la valeur de l'autre var

cette erreur m'est arrivée quand j'ai appelé la directive avec var1 et mis à jour var2 dans le code 

<pb-my-directive  var1="something"></my-directive>

pour résoudre ce problème, appelez la directive avec toutes les variables de portée que vous souhaitez mettre à jour, même avec des valeurs non signifiantes dans mon exemple.

<pb-my-directive  var1="something" var2="false"></my-directive>

espérons que cela vous aide

0
Basheer AL-MOMANI