angularjs – 角度ui-bootstrap popover模板内容和关闭按钮

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

1 – 关闭按钮

我可以使用popover-is-open打开和关闭.然而,我需要跟踪一个变量,如果我有一个包含20个弹出窗口(一个大表单)的页面,那么在控制器中有这么多变量只是为了显示和隐藏一个弹出窗口点击关闭内部不是一个好的解决方案模板.

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>

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

这是一个未经测试的代码,可以提供您的想法：

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>

原文地址：https://www.jb51.cc/angularjs/141814.html