1

I have some JS code like this:

              switch(sc.article.type) {
                case articleTypes.text:
                  template = "<div class='form-group'><div class='input-group' ng-show='article.suffix'><input class='form-control' type='text' ng-model='article.response'/><div class='input-group-addon'>{{ article.suffix }}</div></div><input class='form-control' type='text' ng-model='article.response' ng-show='!article.suffix'/></div><p class='help-block'>{{article.help}}</p>";
                  break;
                 case articleTypes.number:
                   ... etc

I think this could be structured more nicely. For example, for each sc.article.type I could put that HTML code for template in its own HTML file rather than trying to define it in-line.

But how can I do that?

Improve this question

4 Answers 4

Reset to default
1

$templateCache service of angularjs will be helpful to you.

First put all your possible templates in $templateCache 

angular.module('app', []).run(function($templateCache) {
  $templateCache.put('text', "<div class='form-group'><div class='input-group' ng-show='article.suffix'><input class='form-control' type='text' ng-model='article.response'/><div class='input-group-addon'>{{ article.suffix }}</div></div><input class='form-control' type='text' ng-model='article.response' ng-show='!article.suffix'/></div><p class='help-block'>{{article.help}}</p>");
  $templateCache.put('number', 'number relaed template');
});

After configuring all templates. Now $templateCache will take care all this string.

Now with the same service you can retrieve the template in javascript also.

you can get template by template-id.

$templateCache.get('text');  to retrieve text template associated with 'text' switch case.


$templateCache.get('number'); to retrieve number related template. likewise....

You can write separate html files too.

See this example Demo plunkr for both the ways.

  1. Separate html files

  2. Put templates in $templateCache.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Generally wherever you can use template: '<htmlString>' in angular such as directives or routing config you can use templateUrl: 'path/to/file.

Note that templateUrl can also reat template <script> tags included in main page or read from $templatCache also using the same url

Improve this answer

Comments

0

Just to add to @charlietfi answer: You can use ng-switch tag since you already using switch on string variable. So you'll define multiple directives, each with it's own template html file.

Improve this answer

Comments

0

I would put this in a directive. It could be very, very simple:

app.directive("myArticle", function(){
  return { templateUrl : "template.html" }
});

It makes the html very clean:

<div ng-repeat="article in articles">
  <div my-article></div>
</div>

The template file would still be a mess (especially if you add switches and ifs) but at least now it's hidden out of sight!

<!-- template.html -->
<div class='form-group' ng-if="article.type=='text'">
  <h4>This is a text</h4>
  <div class='input-group' ng-show='article.suffix'>
    <input class='form-control' type='text' ng-model='article.response' />
    <div class='input-group-addon'>
      {{ article.suffix }}
    </div>
  </div>
  <input class='form-control' type='text' ng-model='article.response' ng-show='!article.suffix' />
</div>

Working example here: http://plnkr.co/edit/nHBSMHpj0tA7FAb0sft7?p=preview

Also if the templates doesn't differ much, the really easy solution would be to just toggle class (ng-class="{'text':(article.type==articleTypes.text)}) and simply hide unused fields using css.

And one more note: There are ways to make the templateUrl dynamic, for example depending on article.type. You can even pass it a function(element, attributes) , but the attributes are not linked at this point which makes it a hassle and adds extra complexity. So I would advice you to stay away from it if you can!

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.