angularjs - angular ui-bootstrap popover 模板内容和关闭按钮

Question

使用 ui-bootstrap我可以为 popover 使用自定义模板。但是，我面临着几个问题:

1 - 关闭按钮

我可以用 popover-is-open打开和关闭。但是，然后我需要跟踪一个变量，如果我有一个包含 20 个弹出框(一个大表单)的页面，那么在 Controller 中有这么多变量只是为了显示和隐藏一个弹出框并不是一个好的解决方案。模板。

2 - 弹出窗口中的内容/数据

我可以从模板中的 Controller 访问模板内容的数据，但是我需要为 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>

更新:
我试图使用装饰器覆盖但不能。是否有任何内置选项可以减少这种“重复性”，或者，如何覆盖自定义行为？

Answer 1

这是一个未经测试的代码，可以为您提供想法:

angular.directive('myDirective', function(){
    return{
      restrict:'A'
      replace:true 
      scope:{
         title:'@myTitle',
         content:'@myContent',
         visible:'=visible'
      }, 
      template : '<div>'+
    '<a class="pull-right clickable" ng-click="visible = false">'+
    '<i class="fa fa-close"></i></a>'
    '<div class="tooltip-info__arrow"></div>'+
    '<strong>{{title}}</strong>'+
    '<p>{{content}}</p>'+
'</div>'
    };
});

用法 :

<div my-directive my-title="{{popovers.ts.title}}" 
my-content="{{ppovers.ts.content}} visible="popovers.ts.visible"></div>