Bind ng-click in ng-bind-html :: Binding Angular attributes in the HTML

Question

I have a HTML code I am dynamically changing based on the navigation stack. I am using ng-bind-html to insert the string containing the code into the view. Now I need to be able to input the ng-click attribute into the view too. Everything is OK except the ng-click attribute does not get injected and hence I am unable to quickly navigate in the breadcrumbs.

Here is the HTML I am passing to the view:

$scope.breadcrumbs = $scope.breadcrumbs + '&nbsp;<i class="ion-ios-arrow-forward"></i>&nbsp;' + '<span ng-click="goToLevel(pathLength)" class="browse-breadcrumbs-link">' + $scope.title + '</span>';

The class gets applied but the ng-click attribute gets simply ignored. What am I missing? Thanks.

You should concider creating some directive for handling breadcrumbs. — hsz, Oct 22 '15 at 10:41
@JoãoColucas How would that work? I have an n number of levels I can go into, the data is created dynamically from the server so I cannot know in advance how many strings I will need. — lmenus, Oct 22 '15 at 10:44
I'm sure it would be way easier if you just pushed next breadcrumb into i.e. array and repeat through the said array to generate nice breadcrumbs — maurycy, Oct 22 '15 at 10:44
@maurycy Ah yes, so simple, I am an expert on creating complicated solutions :P thanks — lmenus, Oct 22 '15 at 10:49
Possible duplicate of [How to make ng-bind-html compile angularjs code](http://stackoverflow.com/questions/19726179/how-to-make-ng-bind-html-compile-angularjs-code) — Andre Kreienbring, Oct 22 '15 at 10:49

score 0 · Accepted Answer · answered Oct 22 '15 at 10:45

If you look at ng-bind-html API you will come to know that it only parse the html & append it as text to the DOM using element.text. The html has added will not have any compile'd angular DOM. It will work as normal markup.

I'd suggest your own directive to handle breadcrumb stuff by putting it on breadcrumb element. So that you can get control over that DOM inside directive link function. After creating your breadcrumb html you need to compile that html first and then append it to breadcrumb DOM using $compile service.

Code

link: function(scope, element, attrs){
   //you code would something like below..
   //create an html
   scope.breadcrumbs = scope.breadcrumbs + '&nbsp;<i class="ion-ios-arrow-forward"></i>&nbsp;' + '<span ng-click="goToLevel(pathLength)" class="browse-breadcrumbs-link">' + $scope.title + '</span>';
   element.empty();
   element.append($compile(scope.breadcrumbs)(scope))
}

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

From the syntax of breadcrumbs it looks like it can be replaced with simple ng-repeat and leaving html for the view layer i.e.

controller

  $scope.breadcrumbs.push(newCrumb)

where newCrumb would be an object with all the information you need

view

<span ng-repeat="crumb in breadcrumbs">
  &nbsp;<i class="ion-ios-arrow-forward"></i>
  &nbsp;<span ng-click="goToLevel(pathLength)" class="browse-breadcrumbs-link">{{crumb.title}}</span>
</span>

Bind ng-click in ng-bind-html :: Binding Angular attributes in the HTML

2 Answers2

controller

view