I have the following directive in my project:

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

The template looks like this:

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

When I try to load the page it crashes with no errors (tested in both Safari and Chrome).

I have the following directive in my project:

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

The template looks like this:

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

When I try to load the page it crashes with no errors (tested in both Safari and Chrome).

• javascript
• angularjs

2 Answers 2

The mistake was a simple one, but to help you avoid it here's what I did wrong: The name of my CSS class on the UL element is the same as the name of my directive (angular equates hyphenated words and camel case). This means that angular interpreted the CSS class as a call to instance the directive. This created an infinite nesting loop.

To fix this problem I changed the name of the class from "event-sessions-list" to "sessions-list".

I hope this saves you tearing your hair out!

I had a very similar problem but instead of a clash with CSS classes (OP's case), I had it with HTML tags.

Just posting in case someone runs into this slightly different variation of the same root problem.

HTML

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

Nav Template

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

Nav Component

angular
.module('mon')
.ponent('nav', {
    templateUrl: './nav.html',
});

Like OP said, simply renaming it will solve it.

NOTE: I did first try renaming from nav to navbar which is ALSO an HTML class if you look at the Nav Template HTML, but this did not seem to confuse AngularJS.

Not sure why CSS classes cause confusion, but HTML classes don't so maybe someone else can chime in there.