Question

我正在测试角度＆amp;尝试构建自定义角度指令，但我遇到了奇怪的控制台错误。

我的指令定义为：

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

在呈现的页面中，一切都按预期显示，但控制台正在抛出这些类型的错误：Error: Syntax Error: Token 'Item' is an unexpected token at column 4 of the expression [My Item Title] starting at [Item Title].

如果我摆脱了空间，错误消失了，但我不明白为什么会这样。任何人都可以开导我吗？谢谢！我还是角斗机的新人，善良！：）

编辑：忘记提及我正在运行角度版本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>

Answer 2

好的，所以我认为这与角度缓存模板有关。

我曾试过通过传递属性（{{title}}等）在元素上添加ng-show。这招惹了一些事情，所以我将其删除了。我认为在查找抛出错误的模板时，angular仍然使用缓存版本，但它仍然能够正确渲染。上面的代码工作得很好！ Trixy！

作为参考，我现在使用以下模板：

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

自定义Angular Directive属性中的“Error：Syntax Error unexpected token”

2 个答案: