Javascript 错误：[$compile:nonassign] 与指令“myFacebook”一起使用的表达式“undefined”是不可分配的
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25627683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Error: [$compile:nonassign] Expression 'undefined' used with directive 'myFacebook' is non-assignable
提问by harshit
I am writing a directive in angularjs and get the above mentioned error. I am using the code from a book.
我正在用 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}}'
}}])
I get error at
我在
$scope.$apply(function() {
$scope.myFriends = response.data;
});
The HTML code
HTML代码
<div my-facebook></div>
<h1> My Friend's Birthday Reminder</h1>
<div ng-repeat="friend in myFriends">
{{friend.name}}
</div>
回答by Louis
My solution was harder to find out here, but easier to implement. I had to change it to the equivalent of(Note that the question mark makes the attribute optional. Prior to 1.5 this apparently wasn't required).
我的解决方案在这里更难找到，但更容易实现。我不得不将其更改为等效的（请注意，问号使属性可选。在 1.5 之前，这显然不是必需的）。
scope: {
permissions: '@',
myFriends: '=?friends'
}
回答by bmleite
The problem is that you are not defining the attribute friendsin the directive element <div my-facebook></div>.
问题是您没有friends在指令元素中定义属性<div my-facebook></div>。
When you define the directive's scope like this:
当您像这样定义指令的范围时：
scope: {
permissions: '@',
myFriends: '=friends'
}
You are basically saying:
你基本上是在说：
- Bind to the local scope's
permissionsproperty the value of DOM attribute with the same name - Set up bi-directional binding between the local scope's
myFriendsproperty and the parent scope'sfriendsproperty
permissions将同名 DOM 属性的值绑定到本地作用域的属性- 在本地作用域的
myFriends属性和父作用域的friends属性之间设置双向绑定
Since you are not defining the attribute friendsin the DOM, Angular cannot create the bi-directional binding and throws the error. More information here.
由于您没有friends在 DOM 中定义属性，Angular 无法创建双向绑定并抛出错误。更多信息在这里。
Define the friendsattribute on your DOM and it should fix the problem:
friends在 DOM 上定义属性，它应该可以解决问题：
<div my-facebook friends="friendList"></div>
And, for example, on the controller:
并且，例如，在控制器上：
app.controller('Ctrl', function($scope) {
$scope.friendList = [];
});
回答by Matt Lishman
Not a direct answer to OPs question, but this just happened to me so for anyone else that might Google this error in the future. This is similar to JohnP's answer.
不是对 OP 问题的直接回答，但这只是发生在我身上，所以对于将来可能会搜索此错误的其他人。这类似于 JohnP 的回答。
This error can also appear if you have a camelCase attribute in your directive.
如果您的指令中有驼峰命名法属性，也会出现此错误。
So if you have:
所以如果你有：
<div my-facebook myFriends></div>
<div my-facebook myFriends></div>
It will throw the error.
它会抛出错误。
This is because (taken from the angular documentation):
这是因为（取自 angular文档）：
Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).
The normalization process is as follows:
Strip
x-anddata-from the front of the element/attributes.Convert the
:,-, or_-delimited name to camelCase.
Angular 规范化元素的标签和属性名称，以确定哪些元素匹配哪些指令。我们通常通过区分大小写的驼峰命名规范化名称（例如 ngModel）来引用指令。然而，由于 HTML 不区分大小写，我们以小写形式引用 DOM 中的指令，通常在 DOM 元素上使用破折号分隔的属性（例如 ng-model）。
归一化过程如下：
从元素/属性的前面剥离
x-和data-。转换
:，-或_-delimited名驼峰。
so <div my-facebook myFriends></div>
所以 <div my-facebook myFriends></div>
will need to become <div my-facebook my-friends></div>
将需要成为 <div my-facebook my-friends></div>
回答by JohnP
I run to this same issue and for me the problem was upper case characters in DOM name.
我遇到了同样的问题，对我来说问题是 DOM 名称中的大写字符。
<div my-facebook FRIENDS="friendList"></div>
did not work, but
没有用，但是
<div my-facebook friends="friendList"></div>
worked. I spent a day working on this and found the solution by accident.
工作。我花了一天的时间研究这个并偶然找到了解决方案。
回答by Basheer AL-MOMANI
I had this because I tried to update another variable in my directive's scope but not passed it in html even though it's computed and should not be passed in html
我有这个是因为我试图更新指令范围内的另一个变量，但没有在 html 中传递它，即使它是计算出来的，也不应该在 html 中传递
here is an example of a directive scope
这是指令范围的示例
scope: {
var1: '=',
var2: '='
}
in that directive, I can pass to it var1 or var2 but not both and the directive logic will find the value of the other var
在该指令中，我可以将 var1 或 var2 传递给它，但不能同时传递给它，指令逻辑将找到另一个 var 的值
that error happened to me when I called the directive with var1 and updated var2 in code
当我使用 var1 调用指令并在代码中更新 var2 时发生了该错误
<pb-my-directive var1="something"></my-directive>
to overcome this issue call the directive with all scope variables you want to update even with non-meaning values in my example
为了克服这个问题，即使在我的示例中使用无意义值，也可以使用您想要更新的所有范围变量调用指令
<pb-my-directive var1="something" var2="false"></my-directive>
hope this helps you
希望这对你有帮助
回答by Omer Leshem
If you're using it as a one way binding just define the scope appropriately:
如果您将其用作单向绑定，只需适当定义范围：
scope: {
example: '<'
}
In my case I was using a bi-directional binding as a one-way binding, passing inline objects like these:
在我的例子中，我使用双向绑定作为单向绑定，传递这样的内联对象：
<directive bindings="{key: value}"></directive>
My case was a special one because I (purposely) destroyed objects and thereby broke their bindings, but if you only need one-way binding just define it that way.
我的情况很特殊，因为我（故意）破坏了对象，从而破坏了它们的绑定，但是如果您只需要单向绑定，只需以这种方式定义它。
