CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Doek
Doek

Reputation: 161

Bind html to angular-ui-bootstrap accordion

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?

Upvotes: 0

Views: 910

Answers (2)

dsaket
dsaket

Reputation: 1896

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);
  }; 
});

Upvotes: 1

tuckerjt07
tuckerjt07

Reputation: 922

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.

Upvotes: 0

Related Questions