Javascript 错误：[$compile:nonassign]表达式'；未定义'；与指令'一起使用；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>

我朋友的生日提醒
{{friend.name}

问题在于您没有在指令元素

中定义属性

friends

当您这样定义指令的范围时：

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

你基本上是说：

• 将同名DOM属性的值绑定到本地作用域的

  权限
  属性

• 在本地作用域的

  myFriends

  属性和父作用域的

  friends

  属性之间设置双向绑定

由于没有在DOM中定义属性

friends

，Angular无法创建双向绑定并抛出错误。更多信息

在DOM上定义

friends

属性，它应该可以解决问题：

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

---

我遇到了同样的问题，对我来说，问题是DOM名称中的大写字符

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

不起作用，但是

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

---

成功了。我花了一天时间研究这个问题，意外地找到了解决办法

这不是对OPs问题的直接回答，但这只是发生在我身上，所以对于任何其他可能在将来搜索这个错误的人来说。 这与约翰普的答案相似

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

因此，如果你有：

它将抛出错误

这是因为（从角度上看）：

Angular规范化元素的标记和属性名称，以确定哪些元素与哪些指令匹配。我们通常通过其区分大小写的规范化名称（例如ngModel）引用指令。但是，由于HTML不区分大小写，我们在DOM中以小写形式引用指令，通常在DOM元素（例如ng模型）上使用破折号分隔的属性

规范化过程如下所示：

从元素/属性的前面剥离

x-

和

数据-

将

：

、

-

或

分隔的名称转换为大小写

所以

---

将需要成为

我的解决方案在这里很难找到，但更容易实现。我不得不将其更改为与等价的（请注意，问号使该属性成为可选属性。在1.5之前，这显然不是必需的）

---

我之所以这样做是因为我试图更新指令作用域中的另一个变量，但没有在html中传递它，即使它是计算出来的，不应该在html中传递

下面是一个指令作用域的示例

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

在该指令中，我可以向它传递var1或var2，但不能同时传递两者，指令逻辑将找到另一个var的值

当我用var1调用指令并在代码中更新var2时，这个错误发生在我身上

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

为了克服这个问题，在我的示例中，即使使用无意义的值，也要使用所有要更新的范围变量调用指令

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

---

希望这对您有所帮助

如果您将其用作单向绑定，请适当定义范围：

scope: {
   example: '<'
}

范围：{
示例：“请在您使用
myFacebook
指令的地方发布HTML。太好了，它就像一个符咒。谢谢您也解释了它。很好的解释对我来说，需要强调的是添加到DOM的部分，我本以为我已经做了，但过了太久才意识到我实际上没有。完全相同的问题，它的角度为1.5.3我的属性是noOfRowsPerPage，但它不起作用！它应该是noOfRowsPerPage！！奇怪！@user1829319不应该是
每页行数
，然后在您的指令中：
范围：{noOfRowsPerPage:'='}
？这样你仍然可以在JavaScript中使用camelCase。@user1829319，尽管更好的解决方案可能只是每页
行
，甚至是
行
。这样更容易阅读。答案很好！在这里找到你的答案后，我最终找到了参考：这是最好的答案。谢谢！这篇文章讨论了关于angular中可选范围绑定的更多信息：究竟为什么要将属性名全部大写？：）有趣的问题，不幸的是，我记不起来了：）
<pb-my-directive  var1="something" var2="false"></my-directive>

scope: {
   example: '<'
}

<directive bindings="{key: value}"></directive>