1

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

我的指令定义为：

.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

4

2 回答 2

13

我很确定这是因为 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>
于 2013-07-17T18:44:48.733 回答
0

好的，所以我认为这与积极地对模板进行角度缓存有关。

我曾尝试ng-show通过传入属性（{{title}} 等）来添加元素。这很烦人，所以我将其删除。我认为 Angular 在查找引发错误的模板时仍在使用缓存版本，但它仍然能够正确渲染。上面的代码工作得很好！特里克斯！

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

<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>
于 2013-07-18T14:48:04.340 回答