Lets assume I am having a directive my-popup which is a popup box. In a view I'm using multiple instances of this same directive. I want to let other popup boxes to know when I've clicked a button or on completion of certain async operations on any of the other instances of the directive and perform the relative operations on them.
In such case what is the best way to get this communication happen?
Create a broadcast for the click event, and put together a function that listens to that event, all these in the directive, and then Voila! problem solved.
Related
I want to perform an action each time a blur event happens on a form group bound control in angular.
I've seen the onBlur validation and it is an option. But I don't want to restrict the form control update events to be blurs. People may leave the cursor in the input and submit the form with a key control.
Something like an event observable where I would get a stream of the events the form group is using to perform its internal controls. Filter on the type (if 'blur') and call my function would be ideal.
Is there anything like this?
Also I don't want to use blur bindings from the DOM elements directly in the template. It would be so much extra work to make and maintain.
Basically in vanilla JavaScript you can register event-listeners to that target element via addEventListener():
var formInputElement = document.getElementById("myForm");
formInputElement.addEventListener("focus", myFocusFunction);
formInputElement.addEventListener("blur", myBlurFunction):
formInputElement.addEventListener("focusin", myFocusFunction);
formInputElement.addEventListener("focusout", myBlurFunction);
These will call your functions passed in as listener (callback function) for the event-type (e.g. myBlurFunction for an event-type identified by blur).
Is there anyway to configure angular-ui slider so the model is updated only when user drops mouse key? Instead of changing the value in realtime?
Reason is performance. I make heavy calculations when everytime my moodel changes.
https://github.com/angular-ui/ui-slider
Instead of ng-click or ng-change, try ng-mouseup. It'll do the trick.
There's not a way to configure it, however it seems feasible that you could fork this and convert the elm.bind('slide') call to elm.bind('slidestop'), which would only trigger after the user is done sliding the handle.
EDIT: You could also listen for both, and publish an event from the directive via $rootScope.$broadcast when the user stops sliding the handle, and do your calculations when the subscriber receives that event.
I have a use case to toggle the view of a form using a button. The button is not nested in the same structure of the form, and is out side the scope of the forms controller.
What is the best way to have this toggle button comunicate to the contents controller to display this content?
I have had a similar problem and for advanced comunications between controllers i would recomend a service. A service can be injected into multiple controllers so they can share information & state.
However if all your after is something like a button that you can place anywhere that will show the form, you could consider using the $location.path?
eg. on a view with a list of users
www.example.com/users
append edit
www.example.com/users/edit
then have the form controller watch the $location.path and open itself when it see's edit ?
Is it possible to modify $scope variables on button click if the button is outside the controller area?
For example:
<input type="button>
<div ng-controller="MeetingsCtrl">
Using classes or IDs to find elements is not how things are typically done in Angular.
A controller is typically defined on the top-level element of each view. If your button belongs to the view managed by MeetingsCtrl, it should be inside the div.
However, maybe your button is actually part of another view, in which case you need two views to interact with each other. This is normally done via services, with each controller injecting the same service. Or you could use events.
Yes it is possible. What you have to do is, create different class/id for both input and div tags.
Then make your div as absolute and input as relative. Problem solved!
I have several Angular UI Modals. Every modal has a Cancel button and an "Action" button (which can be Create, Delete, etc).
I use the ui-keyup directive from Angular UI to identify when user pressed buttons.
I would like to click the "Action" button when user hits Enter.
How could I achieve that?
Here is where I got to so far: http://plnkr.co/edit/n6dgiE?p=preview
http://plnkr.co/edit/icKazZ?p=preview
So, I just made sure that createIt() was available on the ui-event (by moving the controller up to <body>) and just triggered it directly.
Now lets say this isn't feasible (there are too many layers between the body tag and the createIt() function). What you COULD do is put some sort of global-handler function or service on $rootScope and then pass the triggering through. However communication down scopes, or across controllers is outside the explicit scope of this question :-)