Ошибка: [$ 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 Birthday Reminder</h1>
<div ng-repeat="friend in myFriends">
     {{friend.name}}
</div>

Ответ 1

Проблема заключается в том, что вы не определяете атрибут 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 = [];
});

Ответ 2

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

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

Ответ 3

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

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

Итак, если у вас есть:

<div my-facebook myFriends></div>

Он выдает ошибку.

Это связано с тем, что (взято из angular документации):

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

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

Разделите x- и data- с передней стороны элемента/атрибутов.

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

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

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

Ответ 4

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

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

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

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

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

Ответ 5

У меня было это, потому что я пытался обновить другую переменную в моей области действия директивы, но не передал ее в 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>

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