webentwicklung-frage-antwort-db.com.de

Fehler: [$ compile: nonassign] Der mit der Direktive 'myFacebook' verwendete Ausdruck 'undefined' ist nicht zuweisbar

Ich schreibe eine Direktive in anglejs und bekomme den oben genannten Fehler. Ich verwende den Code aus einem Buch. 

.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}}'
   }}])

Ich bekomme einen Fehler bei 

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

Der HTML-Code

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

Das Problem ist, dass Sie das Attribut friends nicht im Direktivenelement <div my-facebook></div> definieren.

Wenn Sie den Geltungsbereich der Direktive folgendermaßen definieren:

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

Sie sagen im Grunde:

  • Binden Sie an die permissions-Eigenschaft des lokalen Bereichs den Wert des DOM-Attributs mit demselben Namen
  • Richten Sie eine bidirektionale Bindung zwischen der Eigenschaft myFriends des lokalen Bereichs und der Eigenschaft friends des übergeordneten Bereichs ein

Da Sie das Attribut friends nicht im DOM definieren, kann Angular die bidirektionale Bindung nicht erstellen und den Fehler auslösen. Weitere Informationen hier .

Definieren Sie das friends-Attribut in Ihrem DOM und es sollte das Problem beheben:

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

Und zum Beispiel auf dem Controller:

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

Meine Lösung war hier schwieriger zu finden, aber einfacher zu implementieren. Ich musste es in das Äquivalent von ändern (Beachten Sie, dass das Attribut durch das Fragezeichen optional ist. Vor 1.5 war dies offensichtlich nicht erforderlich).

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

Keine direkte Antwort auf die OP-Frage, aber das ist mir einfach passiert, also für alle anderen, die diesen Fehler in der Zukunft in Google veröffentlichen könnten ... __ Dies ist der Antwort von JohnP ähnlich.

Dieser Fehler kann auch auftreten, wenn Sie in Ihrer Direktive ein camelCase-Attribut haben. 

Wenn Sie also

<div my-facebook myFriends></div>

Es wird der Fehler ausgegeben.

Dies ist, weil (aus dem Winkel Dokumentation genommen):

Angular normalisiert den Tag- und Attributnamen eines Elements, um zu bestimmen, welche Elemente mit welchen Direktiven übereinstimmen. Typischerweise beziehen wir uns auf Anweisungen mit ihrem normalisierten Namen von camelCase (z. B. ngModel). Da HTML jedoch nicht zwischen Groß- und Kleinschreibung unterscheidet, beziehen wir uns auf Anweisungen im DOM in Form von Kleinbuchstaben, wobei in der Regel durch Bindestrich getrennte Attribute für DOM-Elemente verwendet werden (z. B. ng-model).

Der Normalisierungsprozess ist wie folgt:

Entfernen Sie x- und data- von der Vorderseite des Elements/der Attribute.

Konvertieren Sie den mit :, - oder _ getrennten Namen in camelCase.

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

muss <div my-facebook my-friends></div> werden

16
Matt Lishman

Ich renne zu diesem Problem und für mich waren das Problem Großbuchstaben im DOM-Namen.

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

hat nicht funktioniert, aber

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

hat funktioniert. Ich habe einen Tag daran gearbeitet und aus Versehen die Lösung gefunden. 

3
JohnP

Ich hatte dies, weil ich versuchte, eine andere Variable im Gültigkeitsbereich meiner Direktive zu aktualisieren, sie aber nicht in HTML übergeben, obwohl sie berechnet wurde und nicht in HTML übergeben werden sollte

hier ist ein Beispiel für einen Richtlinienbereich

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

in dieser Direktive kann ich var1 oder var2 übergeben, aber nicht beide und die Direktive-Logik findet den Wert der anderen Var

dieser Fehler ist mir passiert, als ich die Direktive mit var1 aufgerufen und var2 im Code aktualisiert habe 

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

um dieses Problem zu überwinden, rufen Sie die Direktive mit allen Bereichsvariablen auf, die Sie aktualisieren möchten, auch mit nicht bedeutungsvollen Werten in meinem Beispiel

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

hoffe das hilft dir

0