Demo of an AngularJS directive's templateUrl in JsBin

Question

I have working code that I want to demo with JsBin but I can't get the AngularJS directive templateUrl to work (it does work with the template value). http://jsbin.com/guvok/ is trying to reference http://jsbin.com/razit/ but fails.

For the sake of completeness and posterity here's the code:

hello.html

<!DOCTYPE html>
<html ng-app="hello">
<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
</head>
<body>
  <div hello></div>
</body>
</html>

hello.css

.hello__content {
    background: #fff;
  }

hello.js

var meter = angular.module('hello', [])
  .directive( 'hello', function() {
    return {
      restrict: 'A',
      replace: true,
      //template: '<p class="hello__content">hello</p>',
      templateUrl: 'http://jsbin.com/razit/',
    };
  });

template.html

<p>hello, world</p>

look at the error in the console, you might want to add the templates js to index.html — Liad Livnat, Jul 20 '14 at 14:42

score 1 · Accepted Answer · 2014-07-20T15:28:05.457

1

Put this at the top of your HTML (after the script tag that loads Angular):

<script type="text/ng-template" id="templateURL">
  <!-- TEMPLATE MARKUP GOES HERE -->
</script>

Edit: In your case, the ID would be "http://jsbin.com/razit/", that way you wont have to edit your directive. Worst case, change the templateURL to not reference an external jsBin.

Edit #2: Changing the templateUrl to a string value not referencing an external url or with the http protocol, I now see your output in jsBin edit mode.

jsBin here: http://jsbin.com/dutofete/1/

edited Jul 20 '14 at 15:28

answered Jul 20 '14 at 14:43

Did you get any console output with this code in place? – Jul 20 '14 at 15:00
Going to the url you just specified (not in edit mode) I can clearly see the 'hello, world' output. Is this not what you're expecting? – Jul 20 '14 at 15:25
See my latest edit for a working example. More than likely, it has to do with cross referencing like GreyBeardedGeek pointed out. – Jul 20 '14 at 15:29

score 1 · Answer 2 · answered Jul 20 '14 at 15:22

When I run http://jsbin.com/guvok/, I get the following error in the Javascript console in my browser:

Error: [$sce:insecurl] http://errors.angularjs.org/1.2.19/$sce/insecurl?p0=http%3A%2F%2Fjsbin.com%2Frazit%2F

If you look up "$sce:insecurl", you'll find the AngularJs error reference doc that says,

AngularJS' Strict Contextual Escaping (SCE) mode (enabled by default) has blocked loading a resource from an insecure URL.

Typically, this would occur if you're attempting to load an Angular template from an untrusted source. It's also possible that a custom directive threw this error for a similar reason.

It also offers a few ways to solve the problem, which is essentially a CORS issue.

Demo of an AngularJS directive's templateUrl in JsBin

hello.html

hello.css

hello.js

template.html

2 Answers2