Angular 1/$interpolate - interpolate elements in array

Question

I have this array stateData.submenu :

[
  {
    "template": "<span>myContacts</span>",
    "sref": "contact.list"
  },
  {
    "template": "<span>myProjects</span>",
    "sref": "project.list"
  },
  {
    "template": "<span>myRecommendations</span>
      <span class=\"badge\">{{ notificationBadge }}</span>",
    "sref": "recommendation.list"
  }
]

For $interpolate the template property in the third element of the array I do (to interpret the {{ notificationBadge }} expression) :

this.interpolateTemplate = this.$interpolate(stateData.submenu[2].template)(this)

but it's not very clean, I would like to create a loop that iterate on all the template properties of the array and the $interpolate.

How can I do it ?

Answer 1

As you said you can iterate your templates and then $interpolate, like so.

var self = this;
this.notificationBadge = "Just a test"
this.templates = [{
     "template": "<span>myContacts</span>",
     "sref": "contact.list"
   },{
     "template": "<span>myProjects</span>",
     "sref": "project.list"
   },{
     "template": "<span>myRecommendations</span> < span class=\"badge\">{{ notificationBadge }}</span>",
     "sref": "recommendation.list"
   }].map(function each(template){
        template.template = $interpolate(template.template)(self)
        return template;
    })