Fehler: [$ compile: nonassign] Ausdruck 'undefined' verwendet mit Anweisung 'myFacebook' ist nicht zuweisbar

Question

Ich schreibe eine Direktive in angularjs und bekomme den oben genannten Fehler. Ich benutze 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 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> 

Answer 1

Das Problem ist, dass Sie nicht das Attribut friends in der Richtlinie Element <div my-facebook></div> definieren.

Wenn Sie definieren den Anwendungsbereich der Richtlinie wie folgt aus:

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

Sie sind im Grunde sagen:

• binden an die lokalen permissions Anwendungsbereich Eigenschaft der Wert von DOM-Attribut mit dem gleichen Namen
• Richten Sie eine bidirektionale Bindung zwischen der myFriends -Eigenschaft des lokalen Bereichs und der friends -Eigenschaft des übergeordneten Bereichs ein

Da Sie das Attribut friends im DOM nicht definieren, kann Angular die bidirektionale Bindung nicht erstellen und löst den Fehler aus. Weitere Informationen here.

Definieren Sie das friends Attribut auf DOM und es soll das Problem beheben:

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

Und zum Beispiel auf dem Controller:

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

Answer 2

ich zu dem gleichen Problem laufen und für mich Das Problem waren Großbuchstaben im DOM-Namen.

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

hat nicht funktioniert, aber

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

gearbeitet. Ich habe einen Tag daran gearbeitet und die Lösung zufällig gefunden.

Answer 3

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

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

Also, wenn Sie haben:

<div my-facebook myFriends></div>

Es wird der Fehler ausgelöst.

Dies liegt daran, (aus dem Winkel documentation genommen):

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

The normalization process is as follows:

Strip x- and data- from the front of the element/attributes.

Convert the : , - , or _ -delimited name to camelCase.

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

wird <div my-facebook my-friends></div>

Answer 4

Meine Lösung war, härter zu werden brauchen hier, um herauszufinden, aber einfacher zu implementieren . Ich musste es zu Äquivalent von ändern (Beachten Sie, dass das Fragezeichen das Attribut optional macht. Vor 1.5 war dies offenbar nicht erforderlich).

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