Błąd: [$ compile: nonassign] Wyrażenie "undefined" użyte w dyrektywie "myFacebook" jest nieprzenoszalne

Question

Piszę dyrektywę w angularjs i otrzymuję wyżej wymieniony błąd. Używam kodu z książki.

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

otrzymuję błąd w

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

kod HTML

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

Answer 1

Problem polega na tym, że nie definiując atrybut friends w elemencie dyrektywy <div my-facebook></div>.

Podczas definiowania zakresu dyrektywy tak:

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

Jesteś w zasadzie mówiąc:

• Bind do zasięgu lokalnego za permissions własności wartość DOM atrybutów o tej samej nazwie
• Skonfiguruj dwukierunkowe powiązanie między właściwością zakresu lokacji o wartości myFriends a właściwością zakresu nadrzędnego: friends Właściwość

Ponieważ nie definiujesz atrybutu friends w DOM, Angular nie może utworzyć wiązania dwukierunkowego i zgłasza błąd. Więcej informacji: here.

Definiowanie atrybutu friends na DOM i powinno rozwiązać problem:

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

I, na przykład, na kontrolerze:

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

Answer 2

biegnę do tej samej kwestii i dla mnie problemem były duże litery w nazwie DOM.

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

nie działa, ale

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

pracował. Spędziłem dzień na pracy nad tym i znalazłem rozwiązanie przez przypadek.

Answer 3

Nie jest to bezpośrednia odpowiedź na pytanie OP, ale tak się właśnie stało dla mnie, tak samo jak dla każdego, kto może Google ten błąd w przyszłości. Jest to podobne do odpowiedzi JohnP.

Ten błąd może również pojawić się, jeśli masz atrybut camelCase w swojej dyrektywie.

Więc jeśli masz:

<div my-facebook myFriends></div>

będzie rzucać się błąd.

To dlatego (wzięte z kątowym documentation):

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.

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

będą musiały stać się <div my-facebook my-friends></div>

Answer 4

Moje rozwiązanie było trudniejsze, aby dowiedzieć się tutaj, ale łatwiejsze do wdrożenia . Musiałem zmienić to na , równoważne z (Należy zauważyć, że znak zapytania czyni atrybut opcjonalnym, a przed 1.5 najwyraźniej nie było to wymagane).

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