0

(Highly related to my other question on Programmers.SE: https://softwareengineering.stackexchange.com/questions/280249/whether-to-abstract-small-repeating-code-segments-in-html-templates)

When I want to reuse a few lines of HTML, it is really annoying that I have to write some JavaScript boilerplate in another file just to create a Directive. I really want to create a Directive in mark up in the same HTML file.

Then an idea came to me: I can create a special directive (custom-tag below) that declares a directive from HTML.

For example:

<custom-tag name="icon" params="{which: '@which'}">
    <span class="glyphicon glyphicon-{{which}}" />
</custom-tag>

Which will translate to some JavaScript like:

module.direcrtive('icon', {
restrict: 'E',
scope = {which: '@which'},
template = '<span class="glyphicon glyphicon-{{which}}" />',
});

And I can call it like

<icon which="asterisk" />

My question is does something like this already exist in Angular?

(I know this is just reinventing some other templating frameworks, but I am required to use Angular.)

Community
  • 1
  • 1
billc.cn
  • 7,187
  • 3
  • 39
  • 79
  • You can just use inline templates `` Is that what you are looking for? – mrak Apr 29 '15 at 09:54
  • I don't really understand the question, but if you just wanna define a scope variable you can use `ng-init="which='asterisk'"` – Michael Apr 29 '15 at 09:59
  • @mrak I don't think that's what I want. I actually want to declare a custom directive from HTML instead of from JavaScript. – billc.cn Apr 29 '15 at 10:11
  • The ` – mrak Apr 29 '15 at 10:21
  • @mrak I will need the ability to pass parameters to the template though, which means I'll still have to declare the Directive in Javascript. – billc.cn Apr 29 '15 at 10:30
  • I don't quite understand why you are doing this all the way around. Isn't it simpler just to create directive in js with template in it? Here you will not need to create " another file just to create a Directive" instead you will have only file. Not html as you wanted but js but result will be same. Only one file. – Mior Apr 29 '15 at 10:43
  • @Mior But the main page has to live in an HTML file instead of JS isn't it? So any additional JS to declare directives is always separated from where the directives are actually called. – billc.cn Apr 29 '15 at 12:39
  • Ok but where is modularity? You have everything in one main html file? Have you separate JS file for your page's controller? If so declare directive in there = no additional file (right after controller). If not you have controller's code in – Mior Apr 29 '15 at 12:46
  • You'll see my reasoning in the other question linked at the top. The main problem is not the __additional__ file, but that directive declaration currently have to be __separated__ from the call site thus limiting their usefulness in reusing code in a localized context. – billc.cn Apr 29 '15 at 12:51

1 Answers1

0

There are (afaik) 3 ways to reference a template in angular:

  • As already mentioned in the question, one can put the markup directly in the template property

  • The template can be referenced via templateId in a separated file

  • The template can be defined within the same page in a <script type="text/ng-template" id="template_id.html"> .... </script>. and referenced via templateId: "template_id.html". More details on this: Using Inline Templates in Angular

Community
  • 1
  • 1
mrak
  • 2,826
  • 21
  • 21
  • Hi, my point is to avoid writing JavaScript as opposed to just finding a place to store the template. – billc.cn Apr 29 '15 at 10:33
  • Ok, so you want something like underscore templates? ng-include may be a solution here but I'm not sure about parameters and template location in this case. – mrak Apr 29 '15 at 10:43
  • It seems that ng-include can all the things you want: http://stackoverflow.com/a/20639967/1494048 – mrak Apr 29 '15 at 11:42
  • Not really, because it doesn't create an isolated scope as in my example so any parameter passing will have to pollute the current scope which is bad. At this point, I think it's clear there's simply no existing solution to this. I'll rest my case and implement it myself then... – billc.cn Apr 29 '15 at 12:44