I want to bind body click event to custom directive. I have created a custom directive for drop down. My functionality is I want closed the option list when the user clicks on the body. The html code for drop down is created by using <ul> and <li> tag. I have used the directive several times on the page. but the page now became slow as the no. of usage of directive increased on the page. So i want to know how to dynamically bind and unbind body click event inside the directive. i used $document.bind('click',function(){//function body}); syntax to bind click event. Please help. Thanks in advance
Instead of using JQuery, you can use the link method to manipulate DOM elements and add listeners
See : the AngularJS doc
I hope it may help
Related
I am using a javascript library that will add/remove elements to the DOM when some data is updated.
To add a new element to the DOM it calls a template function returning an element. In my case, the template function is defined inside an angular directive and returns something like return $compile(html)(scope)[0]; because I need to use the UI Bootstrap Popover directive inside the added element.
For the Popover, I need to use popover-append-to-body="true".
My problem is, if the triggering element is removed from the DOM, the popover is never removed. So if we add a new triggering element, a second popover will be appended to body, etc.
Here is a simplified example : http://plnkr.co/edit/AFsXBcaLBAs0F2garbAu?p=preview
Clicking on the "Click" button opens the popover, clicking "Remove" removes the "Click" button, clicking "Add" re-adds the "Click" button and clicking "Click" again adds a second popover to the DOM.
How can I remove the Popover directive when the triggering element is removed from the DOM ?
I need to totally deletes it, not only hide it/remove it from the DOM (I can hide it with popover-is-open but when this is set back to true, I see the popover still exists).
Is there a way to call destroy on the Popover directive of the element that will be deleted ?
You shouldn't do DOM manipulation in you a controller, both in JS and HTML, that's why directives are for, and for your case there were a couple of built in directives you could have used.
you should have kept an array to represent your buttons and popover states
you should place all you JS code in your controller, and used ng-click to bind click events to functions in your controller
don't use onclick when you have ng-click
The angular API works completely different then vanilla JS and even jquery, so don't mix them, use what Angular provides you, refer to the docs for help.
Here is your "revamped" code
I am using angular-ui-bootstrap lib in my application. I need to create custom alert with button inside firing modal window.
I have tried two options:
Redefine module angular.module("template/alert/alert.html", []) from ui-bootstrap-tpls.js. Didn't work as I didn't manage to implement a button firing popup window.
Create a custom module based on "template/alert/alert.html" one. Found myself lost in a number of controllers in order to make popup window working.
What is the best approach to achieve that?
If I understood the question, you want to add a button to the alert that will launch a modal.
Plunker Demo
The easiest approach is to simply add your button into the alert template. In the Plunker demo, I copied both the contents of the UI Bootstrap alert and modal demos. Then I copied the alert template and added it to a script tag on the page. Inside the standard alert template I added a button as follows:
<button ng-controller="ModalDemoCtrl" class="btn" ng-class="'btn-' + (type || 'warning')" ng-click="open()">Open Modal</button>
That's an incredibly basic approach, but it should be a good starting point for you. If I were doing this in production, I would add my custom templates to the template cache instead of using script tags on the page itself and I would create a custom directive for my modal button so that I could pass any relevant information from my alert to my modal instance and do away with having to hard code the ng-controller on the button itself.
Just put your alert directive inside the modal template:
http://plnkr.co/edit/XJtZWQOqFVc6svECcat0?p=preview
I am adding a few buttons dynamically by injecting html using jquery. I want to be able to use ng-click on those elements but I do not know how to attach an angular click listener on it.
To attach a click listener on a button simply add ng-click="someMethod()" to the button:
<button ng-click="someMethod()">Button text</button>
you will need have to have a scope-method called someMethod().
for reference see the angular docs and note that the expression can be replaced by a method.
We're building a page with Angular, Angular-UI and UI-Bootstrap. The last one includes a directive for accordion, which simplifies a quite repetitive task of building up an accordion and an accordion group.
We, however, must watch for changes from an input inside that accordion. Problem is that the accordion has a child scope and it work work.
Here's a sample from Plunker (open the accordion by clicking on "Just a heading").
Is it possible to track changes into that input?
Try to $emit a custom event. It should bubble up to your scope. Worst case you should be able to listen to that event on the $rootScope
so something like :
$scope.$emit('input:change',{DATA});
on the accordion controller
and
$scope.$on('input:change'),function(data){
//do stuff with the change in input
})
I have a directive that creates and manages a bootstrap modal dialog.
Currently I have the directive watch a boolean held on the controller. The controller can then set this to true to have the modal dialog display.
This seems kinda messy. Is there a better way?
The directive in action:
<modal trigger="shouldDisplayModal" title="{{modalTitle}}"
message="{{modalMessage}}" positiveclick="okClicked()"
negativeclick="closed()"
positivelabel="Ok" negativelabel="Cancel"/>
The watch in the controller of the directive:
// watch the trigger value. expected to be boolean
$scope.$watch('trigger',function(newValue, oldValue){
if (newValue)
{
// enable any disabled buttons
modalElem.find('button').removeClass('disabled');
// show the dialog
modalElem.modal('show');
}
else
{
// hide the dialog
modalElem.modal('hide');
}
});
Here is a working example: http://jsfiddle.net/rabidgremlin/Ya96z/31/
UPDATE: Here is a fixed up example that corrects some issues with multiple directives on a page: http://jsfiddle.net/rabidgremlin/sjbCJ/1/
I was going to suggest using ng-show inside your directive's template (this what the dialog component on the directive page does, along with a visible attribute that is just like your trigger attribute), but then I saw that you also need to enable some buttons before modifying the visibility.
So, I think what you have is fine, and I don't see it as messy. Either your directive has to $watch for something, or you could create the dialog when an event happens -- this seems to be what the $dialog service does that #pkozlowski mentioned in the comments. The latter would not need a trigger attribute.
I blogged about working with angular and bootstrap modals just a couple weeks ago.
My solution involves a service, all of the hide/show magic for the modal is handled by bootstrap's javascript, and angular just worries about the data.
http://willvincent.com/blog/angularjs-and-twitter-bootstrap-playing-nicely