错误:[$ compile:nonassign]与指令'myFacebook'一起使用的表达式'undefined'是不可赋值的

Question

我正在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>

Answer 1

我的解决方案在这里很难找到,但更容易实现.我不得不将其更改为相当于(请注意,问号使属性可选.在1.5之前,这显然不是必需的).

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

Answer 2

问题是您没有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 = [];
});

Answer 3

不是对OP问题的直接回答,但这恰好发生在我身上,对于其他可能将来谷歌这个错误的人.这与JohnP的答案类似.

如果指令中有camelCase属性,也会出现此错误.

所以如果你有:

<div my-facebook myFriends></div>

它会抛出错误.

这是因为(取自角度文档):

Angular规范化元素的标记和属性名称,以确定哪些元素与哪些指令匹配.我们通常通过其区分大小写的camelCase规范化名称(例如ngModel)来引用指令.但是,由于HTML不区分大小写,我们通过小写形式引用DOM中的指令,通常使用DOM元素上的划线分隔属性(例如ng-model).

规范化过程如下:

剥离x-并data-从元素/属性的前面.

转换:,-或_-delimited名驼峰.

所以 <div my-facebook myFriends></div>

将需要成为 <div my-facebook my-friends></div>