Question

我尝试使用一个控制器和指令将popover用于多个实例。我遇到的问题是尝试定义一个隔离的范围，用于管理popover的内容和状态。

问题是，我点击打开“我的内容01”的弹出窗口。并且两个弹出窗口都打开，并且都显示来自第二个弹出窗口的内容（我的内容02）。试图让两者都使用自己的范围而不是共享范围。

这是我的html标记：

<a class="helpful-tip"
    data-my-popover
    data-popover-label=""
    data-uib-popover-template="dynamicPopover.templateUrl"
    data-content="<p>My Content 01</p>"
    data-popover-is-open="popoverState"
    data-popover-trigger="outsideClick"
    data-popover-placement="bottom">

<a class="helpful-tip"
    data-my-popover
    data-popover-label=""
    data-uib-popover-template="dynamicPopover.templateUrl"
    data-content="<p>My Content 02</p>"
    data-popover-is-open="popoverState"
    data-popover-trigger="outsideClick"
    data-popover-placement="bottom">

这是我的控制人员：

angular.module('project.components.common.directives.myPopover', [
    'ui.bootstrap'
])
.controller('myPopoverCtrl', function($scope, $rootScope) {
    $scope.dynamicPopover = {
        template: '<button type='button'
            id='close'
            class='close'
            data-ng-show="true"
            data-ng-click='tt_popoverState=false'>&nbsp;&times;&nbsp;</button><br>
<span data-ng-bind-html="htmlContent"></span>'
    };
})
.directive('myPopover', function ($sce, $compile) {
    return {
        restrict: 'A',
        template: '<span>{{ label }}</span>',
        transclude: true,
        controller: 'myPopoverCtrl',
        link       : function ($scope, element, attrs, ctrl, transclude) {
            $scope.popoverState = false;
            $scope.label = attrs.popoverLabel;
            $scope.htmlContent = $sce.trustAsHtml(attrs.content);
            element.append(transclude());
            console.log(attrs);
        }
    };
});

https://angular-ui.github.io/bootstrap/ - ＆gt;酥料饼

https://github.com/angular-ui/bootstrap/tree/master/src/popover

使用带有dynamicPopover模板的多个popover实例

0 个答案: