Angularjs angular ui引导弹出模板内容和关闭按钮

使用

ui引导

我可以为popover使用自定义模板。然而，我面临着两个问题：

1-关闭按钮

我可以使用

popover is open

打开和关闭。然而，我需要跟踪一个变量，如果我有一个有20个弹出框的页面（一个大表单），那么在控制器中有这么多变量只是在模板内单击close显示和隐藏一个弹出框并不是一个好的解决方案

2-popover中的内容/数据

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

e、 g

然后是模板：

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

{{popovers.un.title}
{{popovers.un.content}

再说一遍：

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

{{popovers.ts.title}}
{{popovers.ts.content}

更新：

---

我试图覆盖使用decorator，但无法覆盖。是否有任何内置选项可以减少这种“重复性”或、、如何覆盖自定义行为？

以下是一个未经测试的代码，它将为您提供以下想法：

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

angular.directive（'myDirective'，function（）{
返回{
限制：'A'
替换：正确
范围：{
标题：“@myTitle”，
内容：“@myContent”，
可见：'=可见'
}, 
模板：“”+
''+
''
''+
“{{title}”+
“{{content}
”+
''
};
});

用法：

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

---

目前，我最终得到了这个解决方案，它可以工作，但不是我想要的（覆盖angular bootstrap ui）

app.directive（'tpldhelpopover'，['$timeout'，函数（$timeout）{
返回{
限制：'A'，
替换：正确，
范围：{
来源：'='
},
控制器：功能（$scope，$sce）{
$scope.tpl=$sce.trustAsHtml(
“
创建一个包含通用模板并使用ng模型将数据绑定到作用域的指令怎么样？你能提供一些示例代码吗？目前不能。编辑你的问题以添加指令提示，其他人可以回答你的问题。指令很棘手，我需要时间来正确测试它。我不知道我看不到问题。你想做什么？@Walfrat-answer看起来很适合删除额外的模板，但你似乎并不想要这个答案。那么你想要的是什么呢？@MatthewGreen更新的问题谢谢你的回答，不过我希望对ui引导进行某种覆盖popoverHum不太了解，试试吧使用
.decorator
重载模板、作用域或/和链接函数。
<div my-directive my-title="{{popovers.ts.title}}" 
my-content="{{ppovers.ts.content}} visible="popovers.ts.visible"></div>

app.directive('tpldHelpPopover', ['$timeout', function($timeout){
    return{
        restrict:'A',
        replace:true,
        scope:{
            source:'='
        },
        controller:function($scope, $sce){
            $scope.tpl = $sce.trustAsHtml(
              '<div><a class="pull-right clickable" ng-click="source.visible=false" style="cursor:pointer"><i class="fa fa-close">x</i></a>'+
                '<div class=""></div>'+
                '<strong>'+$scope.source.title+'</strong>'+
            '<p>'+$scope.source.content+'</p>'+
            '</div>')
        },
        link: function(scope, el, attrs){
            scope.$watch('source.visible', function(newVal, oldVal){
                if(newVal == true){
                    $timeout(function(){
                            console.log(el.next().find('.clickable'));
                        el.next().find('.clickable').bind('click', function(){
                            el.trigger('click');
                        })
                    },100);
                }
            });
        },
        template : '<span  uib-popover-html="tpl" popover-is-open="source.visible" popover-placement="right"><button class="btn">Popover Button</button></span>'
    };
}])