Bind html to angular-ui-bootstrap accordion

Question

I'm using the angular-ui-bootstrap accordion. And I'm in a ng-repeat. In my accordion heading I'm trying to bind to a scope variable with html in it. I'm trying to bind the html with data-ng-bind-html and the angular $sce service. I've also injected ngSanitize in my app.js.

But I don't get the result I want. This is my accordion heading:

<accordion close-others="true">
        <accordion-group class="row" data-ng-repeat="content in pageContent" data-ng-if="content.pageId === page.id">
            <accordion-heading data-ng-bind-html="trustedHtml(content.columnTitle)" ></accordion-heading>
            <!-- rest of content -->
       </accordion-group>
      </accordion>

In my controller I inject $sce and this is the $scope method:

$scope.trustedHtml = function (input) {

        return $sce.trustAsHtml(input);
    }

Can anyone help me with this?

dsaket · Accepted Answer · 2015-08-17 11:38:00Z

1

Try doing the following,

In HTML,

<accordion close-others="true">
   <accordion-group class="row" data-ng-repeat="content in pageContent" data-ng-if="content.pageId === page.id">
     <accordion-heading ng-bind-html="content.columnTitle | unsafe" ></accordion-heading>
            <!-- rest of content -->
   </accordion-group>
</accordion>

In Javascript,

app.filter('unsafe', function($sce) {
  return function(val) {
      return $sce.trustAsHtml(val);
  }; 
});

answered Aug 17, 2015 at 11:38

dsaket

1,9062 gold badges20 silver badges30 bronze badges

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

Comments

tuckerjt07 · Accepted Answer · 2015-07-09 05:05:39Z

0

Instead of doing this with a controller and model why not use a directive template. Pass the variable to the template. Extract it's value and then give it as the replace value inside of your directive.

answered Jul 9, 2015 at 5:05

tuckerjt07

9221 gold badge13 silver badges32 bronze badges

3 Comments

Doek Over a year ago

i'm in a ng-repeat: i've adjusted the html sample code above just a minute ago

tuckerjt07 Over a year ago

You can still use a custom directive and template. Put the directive on the accordion-heading tag, pass the scope variable name with the directive, get the scope value in the directive and set element.html to the stored value. It's a stylistic thing but I prefer this way over the others as I want to keep all DOM manipulations out of the controller, factory, etc. and only in directives. Also, since this is what a directive is designed for you no longer have to worry about getting Angular to recognize it's actually supposed to be inserting HTML.

Doek Over a year ago

hi, thanks for your response. I've tried your suggestion, but i'm still struggling. I think it's because i'm putting a directive on a (bootstrap-ui accordion) directive

Collectives™ on Stack Overflow

Bind html to angular-ui-bootstrap accordion

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related