popover functionality lost once another popover is accessed

Published

I have multiple popovers on a page. some have are multiples of the same popover (directive/controller) with different ng-model passed. Others are completely different. when I open are p1 it displays and functions as it should. once I open p2, p2 operates as expected and p1 displays the correct information but can not use any of the controls in p1. when I open p3, p3 operates as expected and p1 and p2 displays the correct information but can not use any of the controls in p1,p2.

The controls are a mixture of toggle buttons, sliders, drop downs.

button that displays the popover

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

directive

 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);
    ..........
}

controller

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)
    }
.............
}

Source: AngularJS Questions

Published
Categorized as angularjs, popover Tagged ,

Answers

Followed this example https://embed.plnkr.co/plunk/MkgGyB

looks like the key is having the controller inside the directive.


Moises Hermann MD

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq