9

Can I link to a specific file within a Plunker? Specifically, I'd like to use Angular's "templateUrl" within a directive to externalize the HTML for a directive I'm building:

myApp.directive('groupedlist', function() {
  return {
    restrict: 'E',
    scope: true,
    templateUrl: '/groupedList.html',
    link: function() {}
  };
});

I have a file called "groupedList.html" that contains a HTML template, but it seems like these are logical files within a Plunker project - my browser complains because it can't find groupedList.html. Is it possible to do what I'm trying to do using Plunker? I'd rather not use the "template" attribute because there is a not-insignificant amount of HTML content I'd like to externalize.

blaster
  • 8,876
  • 11
  • 48
  • 77
  • 3
    They're relative paths. Use `templateUrl: 'groupedList.html'` instead. – Josh David Miller Apr 19 '13 at 17:15
  • 1
    Thanks, but that doesn't work. The browser reports trying and failing to load this url: http://run.plnkr.co/groupedList.html – blaster Apr 19 '13 at 18:19
  • 1
    It should work. Can you provide a link to your plunker? – Mark Rajcok Apr 19 '13 at 18:26
  • 2
    My mind is kind of blown, but in the process of trying to simplify the Plunker in order to share it, it started working! I think it was some nuanced thing I was doing wrong with camel casing vs. snake casing as I named and referenced the custom directive. Sorry, and thank you - it works! – blaster Apr 19 '13 at 18:36
  • 1
    I have had several instances where the running/preview version of the Plunker has simply not aligned with the current code. Refreshing the app page (not the preview) works. But, glad it's solved! – Josh David Miller Apr 19 '13 at 20:25

2 Answers2

4

templateUrl doesnt work with absolute URLs, use relative URL instead (like './page.html' or '../templates/page.html'). If u need to load cross domain page to template, u can do a request (XMLHttpRequest) and set STRING HTML as a template.

Rafael Kazuo Sato Simiao
  • 76
  • 6
0

Like what Rafael said, but just to add...if you put your files in a subfolder like i did, use: templateUrl: 'app/home.html', styleUrls: ['app/home.css'],

You would think './home.html' would work but it doesn't even though my component is in the same folder.

Post Impatica
  • 14,999
  • 9
  • 67
  • 78