javascript - Angular Directive(指令)崩溃浏览器

Question

我的项目中有以下指令:

app.directive('eventSessionsList', function() {
  return {
      restrict: 'AEC',
      scope: {
        input: '=data'
      },
      templateUrl: 'directives/event-sessions-list.html'
  };
});

模板看起来像这样:

<ul class="event-sessions-list">
  <li ng-repeat="session in input.eventSessions">
    <span class="date">{{ session.date }}</span>
    <p class="info">
    {{ session.length }} hr session @ {{ session.venue }}</p>
  </li>
</ul>

当我尝试加载页面时，它没有错误地崩溃(在 Safari 和 Chrome 中测试)。

Answer 1

这个错误很简单，但为了帮助你避免它，我犯了一个错误:我在 UL 元素上的 CSS 类的名称与我的指令的名称相同(angular 等同于连字符和驼峰式大小写) .这意味着 Angular 将 CSS 类解释为对指令实例的调用。这创建了一个无限嵌套循环。

为了解决这个问题，我将类的名称从“event-sessions-list”更改为“sessions-list”。

我希望这可以避免你撕破头发!