一旦访问另一个弹出框，弹出框功能就会丢失答案

【问题标题】：popover functionality lost once another popover is accessed一旦访问另一个弹出框，弹出框功能就会丢失
【发布时间】：2021-01-13 21:54:12
【问题描述】：

我在一个页面上有多个弹出框。有些是同一弹出框（指令/控制器）的倍数，但传递了不同的 ng-model。其他人则完全不同。当我打开是 p1 时，它会按应有的方式显示和运行。一旦我打开 p2，p2 会按预期运行，p1 会显示正确的信息，但无法使用 p1 中的任何控件。当我打开 p3 时，p3 按预期运行，p1 和 p2 显示正确的信息，但无法使用 p1、p2 中的任何控件。

这些控件混合了切换按钮、滑块、下拉菜单。

显示弹出框的按钮

<button href="#" spacingpopover
                            type="button"
                            class="btn btn-success btn-spacing"
                            data-toggle="popover"
                            title="Padding & Margins"
                            id="button-spacing-popover-{{$id}}"
                            ng-model="model.value.spacing"
                            style="width:100%"
                            class-id="button-spacing"
                            class-name="button">
                        Padding & Margins
                    </button>

指令

 app.directive('colorpopover', function ($compile, $templateCache, $q, $http) {
        var getTemplate = function () {
            var def = $q.defer();
    
            var template = '';
            template = $templateCache.get('color.html');
            if (typeof template === "undefined") {
                $http.get("/App_Plugins/IBD.ButtonStyles/Popovers/IBD.Color.Popover.html").then(function (data) {
                    $templateCache.put("color.html", data);
                    def.resolve(data);
                });
            } else {
                def.resolve(template);
            }
            return def.promise;
        }
        return {
            restrict: "A",
            require: 'ngModel', // ensures the model is passed in
            scope: { model: '=ngModel' }, //ties the ng-model to the scope of the popover
            controller: 'ColorPopoverCtrl',
            link: function (scope, element, attrs, model) {
                getTemplate().then(function (popOverContent) {
                    // Make sure to remove any popover before hand (please confirm the method)
                    scope.colorPalette = scope.$parent.colorPalette;
                    scope.units = scope.$parent.units;
                    scope.classId = attrs.classId;
                    scope.className = attrs.className;
                    var compileContent = $compile(popOverContent.data)(scope);
                    var options = {
                        placement: "left",
                        html: true,
                        content: compileContent,
                        container: '.ibd-cms'
                    };
                    $(element).popover(options);
    ..........
}

控制器

app.controller('ColorPopoverCtrl', function ($scope) {
    $scope.adjustOpacity = function (node) {
        node.opacity = node.opacity;
        node.rgba.a = node.opacity;
        console.log($scope)
        console.log($scope.model.value)
    }
.............
}

【问题讨论】：

标签： angularjs popover

【解决方案1】：

按照这个例子https://embed.plnkr.co/plunk/MkgGyB

看起来关键是在指令中包含控制器。

【讨论】：