在 angular-strap popover 中将内容作为对象传递

Question

我正在尝试执行以下操作：

我有一系列 json 问题，我是这样传递的：

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

和包含以下代码的模板 'popover.question.tpl.html'：

<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>

问题可能是指令将内容作为字符串传递，导致 ng-repeat 不起作用。如果我只是评估“{{content}}”，我会在 div 中得到实际的 json 数据，但显然我无法使用它。关于如何做到这一点的任何想法？我是否必须为此创建一个单独的控制器（我想避免）？

Answer 1

data-content 将只接受字符串。所以对象不能通过它。 Angular-strap popover 将从它被打开的地方继承作用域。

因此，在您的 popover.question.tpl.html 中您可以直接访问 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>

检查此 plunker 以获取工作示例。

在 angular-strap popover 中将内容作为对象传递

Pass content as object in angular-strap popover

javascript

angularjs

angular-strap