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