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.
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).
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.
When editing a cell in a ui-grid, the underlying model changes immediately (before committing the change by pressing Enter). Pressing escape undoes the change (by setting the model to the original value).
I have a $watch set on the model, it fires with every keystroke, including the cancel event. I would like the model to only change when the change is committed in the grid.
My work-around is to not have a watch, and use a combination of gridApi.edit.on.afterCellEdit and firing events when action buttons (custom templates in cells) are pressed - but that is not a very graceful solution.
Is there any way to coerce ui-grid to delay updating the model until after the cell changes are committed?
There isn't a way built in, currently, as the Grid uses Angular's two-way binding. I would personally try binding the model to a "temporary" local variable using editModelField or a custom row template. Then have your afterCellEdit handler overwrite the "real" model when the change is committed.
You could package this functionality up in a plugin. There's a Yeoman generator for UI-Grid plugins: https://github.com/c0bra/generator-ui-grid-plugin . And this post has a how-to on using it: http://brianhann.com/write-your-own-ui-grid-plugin/
I wanted to have a Dialog box for asking to save the current changes or not. For that I was searching for an event in AngularJS which triggers on change of any scope variable.
As per my logic I will achieve this by creating event on every control and update a variable to say 'Modified' else will have default value.
Is there any other way? Since my logic will need an event on every control.
If you're using a form directive, this is pretty simple. The value of myForm.$dirty will be true if any property has changed. You can even check an individual field with myForm.myField.$dirty.
If you're not using a form, you should probably consider it for what it sounds like you're trying to accomplish. One of my favorite angular features as it makes validation, etc. a breeze!
Reference: angular docs
Take a look at $scope.$watch(...) on the Angular docs, there is a great discussion on how $watch works here on another Stack Overflow question
You should, at the very least, be able to trigger alerts when specific scope-elements have changed. If you are using a form, then the $dirty approach above is absolutely a brilliant way to go.
I am developing application using ExtJS 4.1. I have one spinner field and I want to change value of that method programatically. I have set up listeners like change, spinup and spindown for this same spinner field.
Now I would like to know how to prevent listener method of these events getting fired only when I change the value of spinner field through my program?
For example,
var mySpinner = Ext.ComponentQuery.query('#foopanel > #mySpinner')[0];
mySpinner.setValue(2000);
When mySpinner.setValue(2000); line is executed, change event of mySpinner gets fired and as I have listener method for this change event, that listener method is executed.
Is it possible to prevent invocation of change event listener method?
Thanks..
You could suspend all events by calling
mySpinner.suspendEvents();
mySpinner.setValue(2000);
mySpinner.resumeEvents();
That would be the cleanest an easiest way IMO
And that's also a usecase why this methods exist