Question

使用ui-bootstrap我可以使用自定义模板进行弹出窗口。但是，我面临的问题有几个：

1 - 关闭按钮

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

2 - popover中的内容/数据

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

e.g。

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

更新我试图覆盖使用装饰，但不能。是否有任何内置选项可以减少这种情况＆＃34;重复性＆＃34;或,,,如何覆盖自定义行为？

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>

Answer 2

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

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

plunker：http://plnkr.co/edit/AMAMFddlCCqSN3qgrz6o?p=preview

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

2 个答案: