Angular Ui Popover Close Button
I've read Angular UI Bootstrap adding a close button and show hidden div on ng-click within ng-repeat. I'd like to use the solution from the latter article and apply it to the pro
Solution 1:
This was solved by @ognus on a GitHub thread.
He stated:
I've found that using a simple custom directive worked best for my use case. I just want to be able to close the popover from within the popover template.
The directive exposes scope.toggle method that user custom trigger to open and close popover. I'm then using this method in the popover template.
There is a plnkr that I adapted to test my own issue. The solution involved creating a directive (of course).
HTML
<!DOCTYPE html><htmlng-app="main"><head><scriptdata-require="angular.js@1.x"data-semver="1.4.1"src="https://code.angularjs.org/1.4.1/angular.js"></script><scriptdata-require="ui-bootstrap@0.13.0"data-semver="0.13.0"src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script><linkdata-require="bootstrap-css@*"data-semver="3.3.1"href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /><scriptsrc="popoverToggle.js"></script><scriptsrc="script.js"></script></head><bodystyle="margin: 50px"><!-- Show popover link --><ahref=""popover-placement="bottom"popover-trigger="open"popover="Lorem ipsum dolor sit amet, consectetur."popover-title="This is a title"popover-toggle>
Show popover</a><divpopover-placement="bottom"popover-trigger="open"popover-template="'popover-template.html'"popover-toggle>Show Popover 2</div></body></html>popoverToggle directive
angular.module('main')
.config(function($tooltipProvider) {
$tooltipProvider.setTriggers({'open': 'close'});
})
.directive('popoverToggle', function($timeout) {
return {
scope: true,
link: function(scope, element, attrs) {
scope.toggle = function() {
$timeout(function() {
element.triggerHandler(scope.openned ? 'close' : 'open');
scope.openned = !scope.openned;
});
};
return element.on('click', scope.toggle);
}
};
});
Popover template
<p>Are you sure you want to remove this item?</p><ahref=''ng-click='remove(item)'>Yes</a><divng-click='toggle()'>No</div>Solution 2:
app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
app.controller(
'dataCtrl', function() {
var self = this;
self.data = [
{name: "one", num: 23},
{name: "two", num: 87},
{name: "three", num: 283}
]
return self;
}
)
app.controller(
'myPopoverCtrl', ['$scope',
function($scope) {
// query popover
$scope.myPopover = {
isOpen: false,
templateUrl: 'myPopoverTemplate.html',
open: functionopen( value ) {
$scope.myPopover.isOpen = true;
$scope.myPopover.data = "(" + value.num + ")";
},
close: functionclose() {
$scope.myPopover.isOpen = false;
}
};
}
]);<bodyng-app="ui.bootstrap.demo"class='container'><divng-controller='dataCtrl as dc' ><ling-repeat="d in dc.data">
{{d.name}}
<ang-controller="myPopoverCtrl"popover-template="myPopover.templateUrl"popover-title="This is a popover"popover-placement="right"popover-is-open="myPopover.isOpen"ng-click="myPopover.open(d)">
pop
</a></li></div><scripttype="text/ng-template"id="myPopoverTemplate.html"><h2ng-bind="myPopover.data"/><buttonclass="btn btn-success"ng-click="myPopover.close()">Close me!</button></script></body>This is solution using another controller for the popover. this controller opens and closes the popover. you can also write the directive instead of controller. Its works fine if data is in repeat.
Post a Comment for "Angular Ui Popover Close Button"