Call an AngularJS function inside HTML

Question

I was trying to see if there is a way to call a function I designed inside the scope:

<ul class="ui-listview ui-radiobutton" ng-repeat="meter in meters">
    <li class = "ui-divider">
        {{meter.DESCRIPTION}}
        {{htmlgeneration}}
    </li>
</ul>

$scope.htmlgeneration = function()
{
    ...
}

The function is called htmlgeneration. Essentially, what I want to do is dynamically append HTML inside the li element while using AngularJS.

While calling a function from HTmL like @SomeKittens said , Your function will be called more than once . Why ? Answer is [Here](https://stackoverflow.com/questions/17164230/angular-scope-function-executed-multiple-times) . So be careful when calling function from HTML . It may slowdown the loading of your page . — Md. Shohag Mia, Feb 07 '19 at 08:45

score 62 · Accepted Answer · answered Mar 28 '14 at 21:31

62

Yep, just add parenthesis (calling the function). Make sure the function is in scope and actually returns something.

<ul class="ui-listview ui-radiobutton" ng-repeat="meter in meters">
  <li class = "ui-divider">
    {{ meter.DESCRIPTION }}
    {{ htmlgeneration() }}
  </li>
</ul>

answered Mar 28 '14 at 21:31

SomeKittens

38,868
19
114
143

7

is there a way to do it using parameters? – serge Mar 14 '16 at 15:27
2

@Serge Yes, pass the parameters to the function as normal. – SomeKittens Jul 29 '16 at 18:00

score 0 · Answer 2 · answered Feb 22 '23 at 00:45

I guess my problem was related to conflicts with Django tags. This post was helpful.

What worked for me was a simple solution involving using ng-bind and changing the code to something like this:

<ul class="ui-listview ui-radiobutton" ng-repeat="meter in meters">
  <li class="ui-divider" ng-bind="htmlgeneration(meter.DESCRIPTION)">
  </li>
</ul>

Call an AngularJS function inside HTML

2 Answers2