it-swarm.com.ru

Ошибка: [$ compile: nonassign] Выражение "undefined", используемое с директивой "myFacebook", не присваивается

Я пишу директиву angularjs и получаю вышеупомянутую ошибку. Я использую код из книги. 

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

Я получаю ошибку в 

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

HTML код

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

Проблема в том, что вы не определяете атрибут friends в элементе директивы <div my-facebook></div>.

Когда вы определяете область действия директивы следующим образом:

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

Вы в основном говорите:

  • Привязать к свойству permissions локальной области значения атрибута DOM с тем же именем
  • Установите двунаправленную привязку между свойством myFriends локальной области и свойством friends родительской области

Поскольку вы не определяете атрибут friends в DOM, Angular не может создать двунаправленную привязку и выдает ошибку. Больше информации здесь .

Определите атрибут friends в вашей DOM, и он должен решить проблему:

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

И, например, на контроллере:

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

Мое решение было труднее найти здесь, но легче реализовать. Мне пришлось изменить его на эквивалент (Обратите внимание, что вопросительный знак делает атрибут необязательным. До 1.5 это явно не требовалось).

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

Не прямой ответ на вопрос OP, но это только что случилось со мной, так что для любого другого, кто может погуглить эту ошибку в будущем ........ Это похоже на ответ JohnP.

Эта ошибка также может появиться, если в вашей директиве есть атрибут camelCase. 

Так что если у вас есть:

<div my-facebook myFriends></div>

Это выдаст ошибку.

Это потому что (взято из угловой документации ):

Angular нормализует тег элемента и имя атрибута, чтобы определить, какие элементы соответствуют каким директивам. Обычно мы обращаемся к директивам по их чувствительному к регистру нормализованному имени camelCase (например, ngModel). Однако, поскольку HTML не чувствителен к регистру, мы обращаемся к директивам в DOM с помощью строчных форм, обычно используя атрибуты с разделителями тире на элементах DOM (например, ng-модель).

Процесс нормализации выглядит следующим образом:

Удалите x- и data- с начала элемента/атрибутов.

Преобразуйте :, - или _- разделенное имя в camelCase.

так <div my-facebook myFriends></div>

нужно будет стать <div my-facebook my-friends></div>

16
Matt Lishman

Я бегу к этой же проблеме, и для меня проблема заключалась в заглавных буквах в имени DOM.

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

не сработало, но

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

работал. Я провел день, работая над этим и нашел решение случайно. 

3
JohnP

У меня было это, потому что я пытался обновить другую переменную в области действия моей директивы, но не передал ее в html, даже если она вычисляется и не должна передаваться в html

вот пример области действия директивы

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

в этой директиве я могу передать ей var1 или var2, но не обе, и логика директивы найдет значение другой переменной

эта ошибка произошла со мной, когда я вызвал директиву с var1 и обновил var2 в коде 

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

чтобы преодолеть эту проблему, вызовите директиву со всеми переменными области действия, которые вы хотите обновить, даже с не значащими значениями в моем примере

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

надеюсь, это поможет вам

0
Basheer AL-MOMANI