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将CSS类解释为对实例指令的调用。这创造了一个无限的嵌套循环。

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

我希望这可以帮你撕掉你的头发！

Answer 2

我遇到了一个非常类似的问题，但我没有与CSS类（OP的情况）发生冲突，而是使用了HTML标签。

如果有人遇到相同根问题的这种略有不同的变体，只需张贴。

<强> HTML

if (ranAway && !stuck)

导航模板

<div id="header">
    <div id="header_main">
        <nav></nav>
    </div>
</div>

导航组件

<div class="dark-blue-section main-color">
  <div class="container">
    <nav class="navbar" role="navigation">

就像OP所说，只需重命名就可以解决它。

注意：我首先尝试从导航重命名为导航栏，如果您查看导航，这也是HTML类模板 HTML，但这似乎并没有混淆AngularJS。

不确定为什么CSS类会引起混淆，但是HTML类不是这样，也许其他人可以在那里发声。

Angular指令崩溃浏览器

2 个答案: