I am using bs-popover to display my contents on click(as a menu) in angularjs. But I need to hide this popover-menu when I click somewhere in the browser window. I want it to be dismissed on that type of event. How can I do that?
You need to write directive for this.
yourApp.directive('bndocumentclick',
function($document,$rootScope,$timeout) {
return {
restrict: 'EA',
link : function(scope, element, attrs) {
$document.on("click", function(ev) {
// Do stuff here to remove your popover.
}
}
}
});
HTML
<body bndocumentclick>
And
<div bs-popover ng-click="$event.stopPropagation()">
You need to use because you would not like to close your popover whenever user clicks inside popover.
The solution provied by #Jay Shukla doesn't work.
The "$event.stopPropagation()" on the element that triggers the popover doesn't stops it from closing when you make a click inside the popover.. if you have some interaction inside your popover this will be a problem.
This works:
angular.module('yourApp')
.directive('closePopovers', function ($document, $rootScope, $timeout) {
return {
restrict: 'EA',
link: function (scope, element, attrs) {
$document.on('click', function (ev) {
var targetElem = angular.element(ev.target);
if (targetElem.data('toggle') !== 'popover'
&& targetElem.parents('[data-toggle="popover"]').length === 0
&& targetElem.parents('.popover').length === 0) {
$('.popover').each(function () {
var $this = $(this);
var scope = $this.scope();
scope.$apply(function () {
scope.$hide();
});
}
);
}
});
}
};
});
On your body:
On your element that triggers the popover:
<button data-toggle="popover" [other data elements here] bs-popover>Toggle popover</button>
Related
I want to display a clickable element (a font awesome icon) that copies some data into the clipboard. When a click event occurs I also want to display a tooltip which should disappear once the cursor left (mouseleave) the element.
This element is a directive as I use it several times in my application.
Copying the data is not an issue at all, displaying the tooltip neither. However, it doesn't disappear when the mouse leaves the font awesome icon.
To fix this, first I set the scope.tooltipIsOpen to true and as expected it displayed the tooltips by default.
Then I put some $log.info in the code to see if the value was updated to false. It seems that the value is updated. I also checked if the events were triggered and they are. I assume that the view doesn't update as it should so the tooltip remains displayed. I eventually tried to put a scope.$apply() in the post function, without success.
Here is my directive :
app.directive('toClipboard',
['$log', 'ngClipboard',
function ($log, ngClipboard) {
function compile(element, attrs) {
return {
pre: function (scope, element, attrs) {
if (!attrs.tooltipPlacement) {
attrs.tooltipPlacement = 'auto top';
}
},
post: function (scope, element) {
scope.copy = ngClipboard.toClipboard;
// Tooltip hidden by default.
scope.tooltipIsOpen = false;
// Hiding tooltip.
element.on('mouseenter', function () {
scope.tooltipIsOpen = false;
});
// Hiding tooltip.
element.on('mouseleave', function () {
scope.tooltipIsOpen = false;
});
}
}
}
return {
restrict: 'A',
replace: true,
scope: {
'clipboardData': '#',
'tooltipPlacement': '#'
},
compile: compile,
templateUrl: 'elements/_span-clipboard.html'
};
}
]);
NB: ngClipboard is a service to copy data to clipboard.
Here is the associated HTML template:
<span>
<i class="fa fa-copy clickable"
uib-tooltip="Copied"
tooltip-placement="tooltipPlacement"
tooltip-is-open="tooltipIsOpen"
tooltip-trigger="'click'"
ng-click="copy(clipboardData)"></i>
</span>
Do you have any idea or any lead to solve this issue ?
Thanking you in advance,
Plunker : https://plnkr.co/edit/okzxdSz1VvbkycehMT2G?p=preview
I managed to get this works by wrapping my code in $timeout();. Here is the working code:
app.directive('toClipboard',
['$log', '$timeout', 'ngClipboard',
function ($log, $timeout, ngClipboard) {
function compile(element, attrs) {
return {
pre: function (scope, element, attrs) {
if (!attrs.iconClass) {
attrs.iconClass = 'fa-copy';
}
if (!attrs.iconColorClass) {
attrs.iconColorClass = 'text-primary';
}
if (!attrs.tooltipPlacement) {
attrs.tooltipPlacement = 'auto top';
}
},
post: function (scope, element) {
scope.copy = ngClipboard.toClipboard;
// Tooltips hidden by default.
scope.tooltipIsOpen = false;
// Hiding tooltips on mouseenter event.
element.on('mouseenter', function () {
$timeout(
function() {
scope.tooltipIsOpen = false;
}, 200
);
});
// Hiding tooltips on mouseleave event.
element.on('mouseleave', function () {
$timeout(
function() {
scope.tooltipIsOpen = false;
}, 200
);
});
}
}
}
return {
restrict: 'A',
replace: true,
scope: {
'iconClass': '#',
'iconColorClass': '#',
'clipboardData': '#',
'tooltipPlacement': '#'
},
compile: compile,
templateUrl: 'elements/_span-clipboard.html'
};
}
]
);
$timeout makes sure it runs within an $apply cycle I guess.
I want to dynamically add ngClick to an attribute directive.
javascript
angular.module('app')
.directive('myDirective', ['$log', function ($log) {
return {
restrict: 'A', // PAY ATTENTION TO THIS LINE
compile: function (tElement) {
tElement.attr('ng-click', 'onClick()');
return function postLink(scope) {
scope.onClick = function () {
$log.debug('myDirective is clicked');
}
}
}
}
}]);
markup
<button my-directive>Click Me</button>
From the element inspector of Chrome, I can see that the ng-click attribute is added to the button.
I expect to see the text "myDirective is clicked." in the console when the button is clicked, but actually there's nothing printed. No error is raised. Anyone can help? Thanks in advance.
Rather than using link inside compile use the link function directly as shown below
link: function(scope, element, attrs) {
element.onClick(function(){
$log.debug('myDirective is clicked');
});
}
You can directly add the click handler to the element, you need not bind ng-click directive inside your directive.
Hello please try this one,
HTML:
<div ng-app="angularApp">
<div ng-controller="dirCtrl1">
<button ng-click="clickFun('clicked')">Button</button>
<button my-directive="directive">With directive</button>
</div>
</div>
JS:
.controller('dirCtrl1', function ($scope) {
$scope.clickFun = function (msg) {
console.log(msg);
};
})
.directive('myDirective', function(){
return{
restrict: 'A',
link: function(scope, ele, attr){
var eventName = attr.evetName || 'click';
var mas = attr.myDirective || 'just console';
ele.on(eventName, function(){
console.log(mas);
});
}
};
});
I'm new to AngularJs and learning now, in my current assignment I need to achieve multiple things on ng-click.
To hide and show some DOM elements based on the ng-click
Change the background of the element where the ng-click is applied on, I'm trying to acheive this using a directive.
Mark-up:
<div class="catFilter f6" ng-click="showSubCat = !showSubCat;toggleDropDown()">
Choose A Genre
</div>
<div class="inactive" ng-show="showSubCat" ng-click="hideSubCat = !hideSubCat" ng-hide="!hideSubCat">
</div>
<div class="cat-drop-menu-list" ng-show="showSubCat" ng-hide="!hideSubCat">
</div>
angular directive
retailApp.directive('toggleDropDown', function() {
return function(scope, element, attrs) {
$scope.clickingCallback = function() {
element.css({'background':'url("../images/down-arrow.png") no-repeat 225px 12px;'});
};
element.bind('click', $scope.clickingCallback);
}
});
Issues:
I'm not able to see the directive being applied, i.e., when I click on choose a genre, it is hiding and showing the other two divs, but not changing the back ground.
You can do this a couple ways, with bindings or directives:
http://jsfiddle.net/abjeex75/
var app = angular.module('app', []);
app.controller('AppCtrl', function ($scope) {
$scope.show_sub_cat = false;
$scope.show = function () {
$scope.show_sub_cat = true;
}
$scope.hide = function () {
$scope.show_sub_cat = false;
}
});
app.directive('toggleBg', function () {
var directive = {
restrict: 'A',
link: link
}
return directive;
function link(scope, element, attr) {
element.on('click', function () {
element.toggleClass('red');
});
}
});
I have a directive disable-ng-clicks and under certain conditions, I want to prevent all ng-clicks that are children of the directive. Here is some example markup:
<div disable-ng-clicks> <!-- directive -->
<a ng-click="someAction()"></a>
<div ng-controller="myController">
<a ng-click="anotherAction()"></a>
<a ng-click="moreActions()"></a>
</div>
</div>
If these were normal hyperlinks, I could do something like this in the link function:
function(scope, iElement, iAttrs) {
var ngClicks = angular.element(iElement[0].querySelectorAll('[ng-click]'));
ngClicks.on('click', function(event) {
if(trigger) { // a dynamic variable that triggers disabling the clicks
event.preventDefault();
}
});
}
But this does not work for ng-click directives. Is there another way to accomplish this?
Here is the best I could come up with. I created a new directive to replace ng-click:
directive('myClick', ['$parse', function($parse) {
return {
restrict: 'A',
compile: function($element, attrs) {
var fn = $parse(attrs.myClick);
return function (scope, element, attrs) {
var disabled = false;
scope.$on('disableClickEvents', function () {
disabled = true;
});
scope.$on('enableClickEvents', function () {
disabled = false;
});
element.on('click', function (event) {
if (!disabled) {
scope.$apply(function () {
fn(scope, { $event: event });
});
}
});
};
}
}
}]);
So in a different directive, I can have:
if (condition) {
scope.$broadcast('disableClickEvents');
}
and when I want to re-enable:
if (otherCondition) {
scope.$broadcast('enableClickEvents');
}
I don't like having to use a different directive for ng-click, but this is the best plan I could think of.
You are catching 'click' event on parent only because of JS events bubbling, so if you want to intercept it on all descendants, so your directive should get all descendants of current element, listen their 'click' event and prevent it if necessary.
This directive will iterate over all child elements, check to see if they have an ng-click attribute, and if they do, it will disable any registered click event handlers:
directive('disableNgClicks', function(){
return {
restrict: 'E',
link: function(scope, elem, attrs){
angular.forEach(elem.children(), function(childElem) {
if (childElem.outerHTML.indexOf("ng-click") > -1) {
angular.element(childElem).off('click');
}
});
}
}
})
Plunker demo
I know this is 2 years ago but I needed to do something similar and came up with a rather simple solution.
The object:
items: {
item1 : {
selected: 0,
other: 'stuff'
},
item2 : {
selected : 1,
other: 'stuff'
}
}
The HTML:
<div ng-repeat="item in items" ng-model="item.selected" ng-click="selectParent($event)">
<div ng-click="item.selected ? selectChild($event) : null">Child</div>
</div>
The functions:
$scope.selectParent = function($event) {
var itemScope = angular.element($event.currentTarget)scope().item;
itemScope.selected = !itemScope.selected;
}
$scope.selectChild = function($event) {
$event.stopPropagation;
console.log('I only get triggered if parent item is selected');
}
This is a pretty raw example of what I did. You should probably be using a directive that gives you $scope rather than angular.element($event.currentTarget).scope... either way the simplistic inline if logic is what I was really getting at. You can call a function or not based on some value.
Anyone have a simple directive to automatically show a Bootstrap modal? In Bootstrap 3 they took away the ability to automatically show the modal so I can't use a angular ng-if show block. Any help would be great.
Updated for angular 1.2 & Bootstrap 3.1.1: http://embed.plnkr.co/WJBp7A6M3RB1MLERDXSS/
I extended Ender2050's answer so the directive does not have an isolated scope. This means the modal contents can contain references to scope objects. Also reuse the directive attribute so only one attribute is needed.
app.directive("modalShow", function ($parse) {
return {
restrict: "A",
link: function (scope, element, attrs) {
//Hide or show the modal
scope.showModal = function (visible, elem) {
if (!elem)
elem = element;
if (visible)
$(elem).modal("show");
else
$(elem).modal("hide");
}
//Watch for changes to the modal-visible attribute
scope.$watch(attrs.modalShow, function (newValue, oldValue) {
scope.showModal(newValue, attrs.$$element);
});
//Update the visible value when the dialog is closed through UI actions (Ok, cancel, etc.)
$(element).bind("hide.bs.modal", function () {
$parse(attrs.modalShow).assign(scope, false);
if (!scope.$$phase && !scope.$root.$$phase)
scope.$apply();
});
}
};
});
Usage:
<div modal-show="showDialog" class="modal fade"> ...bootstrap modal... </div>
Here's an Angular directive that will hide and show a Bootstrap modal.
app.directive("modalShow", function () {
return {
restrict: "A",
scope: {
modalVisible: "="
},
link: function (scope, element, attrs) {
//Hide or show the modal
scope.showModal = function (visible) {
if (visible)
{
element.modal("show");
}
else
{
element.modal("hide");
}
}
//Check to see if the modal-visible attribute exists
if (!attrs.modalVisible)
{
//The attribute isn't defined, show the modal by default
scope.showModal(true);
}
else
{
//Watch for changes to the modal-visible attribute
scope.$watch("modalVisible", function (newValue, oldValue) {
scope.showModal(newValue);
});
//Update the visible value when the dialog is closed through UI actions (Ok, cancel, etc.)
element.bind("hide.bs.modal", function () {
scope.modalVisible = false;
if (!scope.$$phase && !scope.$root.$$phase)
scope.$apply();
});
}
}
};
});
Usage Example #1 - this assumes you want to show the modal - you could add ng-if as a condition
<div modal-show class="modal fade"> ...bootstrap modal... </div>
Usage Example #2 - this uses an Angular expression in the modal-visible attribute
<div modal-show modal-visible="showDialog" class="modal fade"> ...bootstrap modal... </div>
Another Example - to demo the controller interaction, you could add something like this to your controller and it will show the modal after 2 seconds and then hide it after 5 seconds.
$scope.showDialog = false;
$timeout(function () { $scope.showDialog = true; }, 2000)
$timeout(function () { $scope.showDialog = false; }, 5000)
I'm anxious to see what other solutions people come up with. Cheers!