javascript 自定义 Angular 指令属性中的“错误：语法错误意外标记”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17707298/
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: Syntax Error unexpected token" in custom Angular Directive attributes
提问by matthewsimo
I'm testing out angular & trying to build a custom angular directive, but I'm running into weird console errors.
我正在测试 angular 并尝试构建自定义 angular 指令，但我遇到了奇怪的控制台错误。
My directive is defined as:
我的指令定义为：
.directive('ipRecentActivityItem', function() {
return {
restrict: 'A',
replace: true,
transclude: true,
scope: {
'title': '@title',
'icon': '@icon',
'timeago': '@timeago',
'meta': '@meta',
},
templateUrl: IP_PATH + '/app/components/recent-activity/recent-activity-item.tpl.html'
}
});
My template is:
我的模板是：
<div class="recent-activity-item">
<div class="recent-activity-content">
<div class="recent-activity-message">
<a href="" class="recent-activity-title">
{{title}}
</a>
<div class="recent-activity-meta">
{{meta}}
</div>
<div data-ng-transclude></div>
</div>
</div>
<a href="" class="recent-activity-timeago">{{timeago}}</a>
</div>
Then, in my view, I'm trying to call it with:
然后，在我看来，我试图用以下方式调用它：
<div data-ip-recent-activity-item
title="My Item Title"
icon="My item icon"
timeago="4 hours ago"
meta="someone commented on an issue in garageband">
My Item content
</div>
In the rendered page, everything is showing as it should, but the console is throwing these types of errors: Error: Syntax Error: Token 'Item' is an unexpected token at column 4 of the expression [My Item Title] starting at [Item Title].
在呈现的页面中，一切都按原样显示，但控制台会抛出以下类型的错误： Error: Syntax Error: Token 'Item' is an unexpected token at column 4 of the expression [My Item Title] starting at [Item Title].
If I get rid of the spaces, the error goes away, but I don't understand why that is. Can anyone enlighten me? Thanks! I'm still new to the angular arena, be kind! :)
如果我去掉空格，错误就会消失，但我不明白为什么会这样。任何人都可以启发我吗？谢谢！我还是角斗场的新手，请客气！:)
EDIT: Forgot to mention I'm running angular version 1.1.5
编辑：忘了提及我正在运行 Angular 版本 1.1.5
采纳答案by matthewsimo
Ok, so I think this was related to angular caching the template aggressively.
好的，所以我认为这与积极地对模板进行角度缓存有关。
I had tried playing around adding an ng-showon the elements by passing in the attributes ( {{title}}, etc..). This borked somethings, so I removed it. I think angular was still using the cached version when looking up the template which threw the errors, but it was still able to render properly. The above code works just fine! Trixy!
我曾尝试ng-show通过传入属性（{{title}} 等）在元素上添加。这使某些事情变得无聊，所以我将其删除。我认为 angular 在查找引发错误的模板时仍在使用缓存版本，但它仍然能够正确呈现。上面的代码工作得很好！崔西！
For reference, I'm using the following template now:
作为参考，我现在使用以下模板：
<div class="recent-activity-item">
<div class="recent-activity-content">
<div class="recent-activity-message">
<a href="" class="recent-activity-title" data-ng-hide="title === ''">
{{title}}
</a>
<div class="recent-activity-meta" data-ng-hide="meta === ''">
{{meta}}
</div>
<div data-ng-transclude></div>
</div>
</div>
<a href="" class="recent-activity-timeago" data-ng-hide="timeago === ''">{{timeago}}</a>
</div>
回答by Jason More
I'm pretty sure its because angular tries to evaluate the bits in the quotes. Try adding single quotes and see if the message goes away
我很确定这是因为 angular 试图评估引号中的位。尝试添加单引号，看看消息是否消失
<div data-ip-recent-activity-item
title="'My Item Title'"
icon="'My item icon'"
timeago="'4 hours ago'"
meta="'someone commented on an issue in garageband'">
My Item content
</div>
