小编Raz*_*med的帖子

使用ui-bootstrap我可以使用自定义模板进行弹出.但是我面临几个问题:

1 - 关闭按钮

我可以popover-is-open用来打开和关闭.不过,我则需要跟踪的变量,如果我有20个popovers(大表格)页,然后它不是一个很好的解决方案,以在控制这么多的变数只是为了显示和隐藏在单击关闭里面的一个酥料饼模板.

2 - popover中的内容/数据

我可以从模板中的控制器访问模板内容的数据,但是我需要为20个弹出窗口编写20个模板.

例如

$scope.popovers = {
un: {visible: false, title: 'Help', content: 'some explanation here'},
ts: {visible: false, title: 'another title', content: 'some explanation here again'}
}

然后是模板:

<script type="text/ng-template" id="myPopoverTemplate.html">
    <div>
        <a class="pull-right clickable" ng-click="popovers.un.visible = false"><i class="fa fa-close"></i></a>
        <div class="tooltip-info__arrow"></div>
        <strong>{{popovers.un.title}}</strong>
        <p>{{popovers.un.content}}</p>
    </div>
</script>

然后再次:

<script type="text/ng-template" id="myPopoverTemplate.html">
    <div>
        <a class="pull-right clickable" ng-click="popovers.ts.visible = false"><i class="fa fa-close"></i></a>
        <div class="tooltip-info__arrow"></div>
        <strong>{{popovers.ts.title}}</strong>
        <p>{{popovers.ts.content}}</p>
    </div>
</script>

更新: 我试图覆盖使用装饰,但不能.是否有任何内置选项来减少这种"重复性"或,,,如何覆盖自定义行为？

当我使用的输入组,然后每一件事情是确定的,但是当我使用input-group-lg,然后Go按钮进入下一行.

<div class="input-group-lg">
    <input type="text" class="form-control" placeholder="http://">
      <span class="input-group-btn">
      <button class="btn btn-default " type="button">Go!</button>
    </span>
</div>

我解决了它pull-left在input,但现在它不是在小分辨率正确显示