javascript - 自定义 Angular 指令属性中的 "Error: Syntax Error unexpected token"

Question

我正在测试 angular 并尝试构建自定义 angular 指令，但我遇到了奇怪的控制台错误。

我的指令定义为:

.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'
  }
});

我的模板是:

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

然后，在我看来，我正在尝试调用它:

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

在呈现的页面中，一切都按预期显示，但控制台抛出这些类型的错误:错误:语法错误: token “Item”是表达式 [My Item] 的第 4 列中的意外标记Title] 从 [Item Title] 开始。

如果我去掉空格，错误就会消失，但我不明白为什么会这样。谁能启发我？谢谢!我还是 Angular 竞技场的新手，请客气! :)

编辑:忘了说我正在运行 angular 版本 1.1.5

Answer 1

我很确定它是因为 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>