CODEWITHSUNDEEP
javascriptangularjsangular-strap
Xeroxoid
Xeroxoid

Reputation: 2155

Pass content as object in angular-strap popover

I am trying to do the following:

I have a json array of questions which I pass like this:

<a href=""
  ...
  title="Questions"
  data-content="{{item.questions}}"
  data-template="popover.question.tpl.html"
  ...
  bs-popover>
    {{item.questions.length}}
</a>

and a template 'popover.question.tpl.html' that contains the following code:

<div class="popover">
  <div class="arrow"></div>
  <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
  <div class="popover-content" ng-model="content">
  <ul>
    <li class="animate-repeat" ng-repeat="question in content">
      {{question.text}}
    </li>
  </ul>
  </div>
</div>

The problem is probably that the content is passed as a string by the directive, leading in the ng-repeat not working. If I just evaluate "{{content}}" I get the actual json data in my div but obviously I can't work with that. Any ideas on how to do that? Do I have to create a separate controller for that (which I would like to avoid)?

Upvotes: 1

Views: 1766

Answers (1)

Shripal Soni
Shripal Soni

Reputation: 2448

data-content will accept only string. So object cannot be passed through that. Angular-strap popover will inherit the scope from where it is getting opened.

So, in your popover.question.tpl.html you can directly access item.questions.

<div class="popover">
  <div class="arrow"></div>
  <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
  <div class="popover-content" ng-model="content">
  <ul>
    <li class="animate-repeat" ng-repeat="question in item.questions">
      {{question.text}}
    </li>
  </ul>
  </div>
</div>

Check this plunker for working example.

Upvotes: 2

Related Questions