Using templateUrl in directive freezes app

Question

I have a MEANstack app which behaves really weird. Creating a directive using templateUrl freezes the app. The same directive works using html code with template alone.

dashboard.html:

 <h3>Recent</h3>
 <div my-callout></div>

dashboard.controller.js:

.directive('myCallout', function(){
    return {

    templateUrl:'myCallout.html'
};
})

myCallout.html:

<div>
    <p>fdsfs</p>
</div>

this works:

.directive('myCallout', function(){
    return {

    template:' <p> mhgfhut </p>'
    };
})

;

Maybe it can't find your `myCallout.html`? Are you referencing it correctly?? — c0deNinja, Nov 24 '14 at 19:56
I'm pretty sure I do. After changing it to this I get a warning: "Tried to load Angular more than once" and it just goes into this crazy infinite loop that keeps making all the XHR requests — Ioana Grozav, Nov 25 '14 at 10:34
may be there is an infinite loop, check if in your html page you are not calling the same directive you created, in your case you should not call `myCallout directive` inside `myCallout.html` — Vishrant, Nov 05 '16 at 14:32

7stud · Answer 1 · 2014-11-24T20:26:25.543

Your directive works fine for me:

~/angular_js_projects/9app$ tree
.
├── app.css
├── app.js
├── bootstrap
      <snip>
├── index.html
└── myCallout.html

app.js:

var app = angular.module('myApp', []);

app.directive('myCallout', function() {
  return {
    templateUrl: 'myCallout.html'
  }
});

myCallout.html:

<div>myCallout.html</div>

index.html:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
  <title>AngularJS</title>

  <meta charset="UTF-8">  <!-- For html5 (default is UTF-8) -->
  <meta name="viewport" content="width=device-width, initial-scale=1">  <!-- For Bootstrap -->

  <!-- Bootstrap CSS with glyphicon fonts in bootstrap/fonts/ -->
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  </head>

<body>

  <h3>Recent</h3>
  <div my-callout></div>

<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- App Script -->
<script src="app.js"></script>
</body>
</html>

With this directory structure:

~/angular_js_projects/9app$ tree
.
├── app.css
├── app.js
├── bootstrap
      <snip>
├── index.html
└── templates
    └── myCallout.html

then app.js looks like this:

var app = angular.module('myApp', []);

app.directive('myCallout', function() {
  return {
    templateUrl: 'templates/myCallout.html'
  }
});

my structure is a tad bit more complicated, but the referencing doesn't seem to be the problem. I get a warning, an infinite loop with XHR requests and then an error that starts like this: "Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!(...)" — Ioana Grozav, Nov 25 '14 at 10:38

Using templateUrl in directive freezes app

1 Answers1