错误:[$compile:nonassign]表达式'未定义'与指令'myFacebook

Error: [$compile:nonassign] Expression 'undefined' used with directive 'myFacebook' is non-assignable

本文关键字：未定义 指令 myFacebook 表达式 compile nonassign 错误      更新时间：2023-09-26

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

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

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

问题是您没有在指令元素<div my-facebook></div>中定义属性friends。

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

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

你基本上是在说：

  • 将具有相同名称的DOM属性的值绑定到本地作用域的permissions属性
  • 在本地作用域的myFriends属性和父作用域的friends属性之间设置双向绑定

由于您没有在DOM中定义属性friends，Angular无法创建双向绑定并抛出错误。点击此处了解更多信息。

在DOM上定义friends属性，它应该可以解决问题：

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

例如，在控制器上：

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

这不是对OP问题的直接回答，但这只是发生在我身上，对于未来可能在谷歌上搜索这个错误的其他人来说也是如此。这与JohnP的回答类似。

如果指令中有camelBase属性，也可能出现此错误。

所以，如果你有：

<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>

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

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

不起作用，但

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

工作。我花了一天的时间研究这个问题，意外地找到了解决方案。

我遇到这种情况是因为我试图更新指令范围内的另一个变量，但没有在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: '<'
}

在我的案例中，我使用双向绑定作为单向绑定，传递如下内联对象：

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

我的情况很特殊，因为我（故意）破坏了对象，从而破坏了它们的绑定，但如果您只需要单向绑定，那么就这样定义它。

相关文章：