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

发布时间：2020-12-17 07:23:08 所属栏目：安全来源：网络整理

导读：使用ui-bootstrap我可以使用自定义模板进行弹出.但是我面临几个问题： 1 – 关闭按钮我可以使用popover-is-open打开和关闭.然而,我需要跟踪一个变量,如果我有一个包含20个弹出窗口(一个大表单)的页面,那么在控制器中有这么多变量只是为了显示和隐藏一个弹出

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!