I'm using an old version of timepicker, which lacks the min & max options (and which I sadly can't update at this time). My view looks like this:
<timepicker class="col-md-2" ng-model="date" hour-step="1" minute-Step="0">
I want to prevent timepicker from increasing/decreasing the time beyond certain values. I currently use a watch:
retyped instead of copy-paste, so obvious syntax errors are likely typos, sorry
$scope.$watch('date', function(newVal, oldVal){
if(newVal<minTime){
$scope.date=minTime
$scope.digest();
}
else if(newVal>maxTime){
$scope.date=maxTime
Rscope.digest();
}
}
I needed the digests or the timePicker wouldn't reflect my adjusting the time back to my desired values. However, I now can get a "$digest already in progress" error per this question: AngularJS : Prevent error $digest already in progress when calling $scope.$apply()
However, it's also stated that this is considered an undesirable approach, and that it would be better to avoid using $watch if at all possible.
Is there a different approach beyond the $watch & $digest approach I'm using to more elegantly prevent/reset scope changes like this, that ensures that the timepicker will immediately reflect my reverting it's changes?
...yes switching away from the timepicker were using is already on the to-do list, there are other reasons I dislike it, but I'm more interested in how to handle this use case in general then a fix to this specific issue.
You need to update your model in setTimout() like below to avoid the error $digest already in progress
setTimeout(function () {
scope.$apply(function () {
scope.location3 = 'Your selected value'
});
}, 2000);
Alternatively you can also utilize $timeout service to achieve the same result.
Related
I don't know if i titled my question correctly but here is what i want to achieve and what i have so far (simplified as much as possible):
What I have so far:
For each Visitor I create a "Visitor" Object:
{
name:"Bob",
mouseX:"31", // The mouseposition is constantly updated
mouseY:"400",
messages:[
{text:"Message Text",prop:"other property"},
{text:"Another Message"}
]
}
After that I bind the Object to the scope:
$scope.helpers({
visitor: () => Visitors.findOne({"_id":id})
});
The Messages are shown inside a ng-repeat over the visitor.messages model:
<div ng-repeat="msg in visitor.messages">
<span class="text {{msg.class}}"> {{msg.text}} </span>
</div>
Another Visitor can send a new Message with:
Visitors.update(
{_id: visitor._id},
{$push: {messages: {"text":"New Message"}}}
);
What I want to do
When Bob receives a new message i want to trigger the function newMessageArrived() and to animate the new Message in.
The Problem and what i tried so far
First i tried to use angular:angular-animate package and animate new messages with css-classes but ng-enter triggered for alle messages each time visitor.mouseX was updated and even if nothing other than the messages in the Visitors-Object where pushed still ng-enter triggered for all messages instead only for the new ones.
Thats ok because i guess that the whole DOM is rebuild when the Visitor-Object changes. Now i tried to simply watch the messages prop of the Visitors-Object like:
scope.$watch("visitor.messages", function ( newValue, oldValue ) {
newMessageArrived()
});
Again newMessageArrived() is triggering with each update to the Visitors-Object. Of course i could catch this stupidly with something like checking the length of the messages array but in my understanding even using $watch without this is wrong already.
The Question
So what is the Angular-Meteor way of reacting on changes in a property of a MongoDB Cursor (Object)?
Please consider my examples are extremly simplified to focus on my problem but also i am new to Meteor and not even very experienced in Angular. Also this is for a "proof of concept" project and not for any commercial or professional context, so security, performance and maintainability are not as crucial as usual.
Thanks for your time and hopefully for any help
I found a solution I guess.
Uringo from Angular-Meteor explained in another similar question on Github:
#gooor this is how Meteor's autorun works. it executes on every change
on any reactive thing inside it and a Meteor cursor is a reactive
object. If you want to re-run something only when field is changing
you can use Angular's $watch:
$scope.$watch('field', function(){ console.log('calling');
this.foos = Foos.find({field: this.field}); });
In my particular case I needed to add true as the third parameter to the $watch function. Therefore newMessageArrived() is only called when the property messages is changed.
So my initial concerns where wrong but when someone has a better, more meteorish solution i would appreciate.
after some research and study of examples I implemented a pagniation with a filter function.
Im very new to angular, so I need your help if this application is ok or it has some bugs/logical errors.
The target is to select a collection (in this application load1 or load2) and create new objects, manipulate existing, or delete some of them. On every update of the data, it has to be checked if the pagination is synchronous to the collection size.
If the user enters something into the search field, a watcher in the controller is fired for updating the filtered data:
$scope.$watch('search.name', function (newVal, oldVal) {
$scope.filtered = filterFilter($scope.items, {name: newVal});
}, true);
I would be very happy if some of you angular pros can look into this code and give me some feedback. I want to use this in a productive system, so every answer would be great!
Here is a working plunkr: http://plnkr.co/edit/j9DVahEm7y1j5MfsRk1F?p=preview
Thank you!
Watchers are heavy if you use them explicitly throughout your large application.
Use ng-change instead. Also, by passing true to that watcher means you're deep watching which is really a bad thing to do, since it will check each property of the object in the array which is performance intensive.
Since I can't see that you need old and new value for a reason, you can simply use $scope.search.name. Whenever you type in something, $scope.search.name has the updated value. Just need to call a function on ng-change.
DEMO: http://plnkr.co/edit/TWjEoM3oPdfrHfcru7LH?p=preview
Remove watch and use:
$scope.updateSearch = function () {
$scope.filtered = filterFilter($scope.items, {name: $scope.search.name});
};
In HTML:
<label>Search:</label> <input type="text" ng-model="search.name" placeholder="Search" ng-change="updateSearch()" />
Previous answer is still the correct, but you will have to make sure to replace the "page" inside the pagination tag and change it to ng-model.
From the changelog (https://github.com/angular-ui/bootstrap/blob/master/CHANGELOG.md)
Since 0.11.0:
Both pagination and pager are now integrated with ngModelController.
page is replaced from ng-model.
Assuming a given form such as <form name="myForm">, it's easy enough to watch for validity, error, dirty state, etc. using a simple watch:
$scope.$watch('myForm.$valid', function() {
console.log('form is valid? ', $scope.myForm.$valid);
});
However, there doesn't appear to be an easy way to watch if any given input in this form has changed. Deep watching like so, does not work:
$scope.$watch('myForm', function() {
console.log('an input has changed'); //this will never fire
}, true);
$watchCollection only goes one level deep, which means I would have to create a new watch for every input. Not ideal.
What is an elegant way to watch a form for changes on any input without having to resort to multiple watches, or placing ng-change on each input?
Concerning the possible duplicate and your comment:
The directive solution in that question works, but it's not what I had in mind (i.e. not elegant, since it requires blur in order to work).
It works if you add true as third parameter for your $watch:
$scope.$watch('myFormdata', function() {
console.log('form model has been changed');
}, true);
Further information see the docs.
Working Fiddle (check console log)
Another more angular way would be to use angular's $pristine. This boolean property will be set to false once you manipulate the form model:
Fiddle
Based on my experience with my forms (new dev, but working with Angular for a while now), the elegant way to watch a form for changes is actually not to use any type of watch statement at all actually.
Use the built-in Angular boolean $pristine or $dirty and those values will change automatically on any input field or checkbox.
The catch is: it will not change the value if you add or splice from an array which had me stumped for a while.
The best fix for me was to manually do $scope.MyForm.$setDirty(); whenever I was adding or removing from my different arrays.
Worked like a charm!
I have a form where my intent is for required fields to not always be enforced. For example if the user is saving the document as a draft they can enter as little information as they like, if they try and publish the document then they have to enter all the required fields. I'm using a boolean on the controller which changes according to which button has been pressed e.g.
<input type="text" ng-model="field2" ng-required="enforceRequired" />
The problem is that the fields are not re-evaluated when the boolean changes so the form is submitted and then it becomes invalid. Please see this JSFiddle to see what I mean. If you fill in field1 and then click publish it will succeed on the first click and THEN become invalid.
How can I force the validation to run before the form is submitted?
Yarons is right, you are changing the value too late, by late I mean after the form validations has been run. What you can do as a workaround is, after changing the required value, let angular do another cycle and then show your alert. This can be done via $timeout service, although I must mention that it is usually not a good practise to change the flow of your digest actions. It gets pretty messy pretty soon.
Change your publish function like this (and don't forget to inject $timeout)
$scope.publish = function () {
$scope.enforceRequired = true;
$timeout(function () {
if ($scope.form.$valid) {
alert("Published!");
}
});
};
Working fiddle: http://jsfiddle.net/bh9q00Le/14/
The problem is that you are changing the value of enforceRequired in the middle of the digest loop, so the watchers are not re-rendered before you check the input fields' validity (read about digest here).
If you want to get around it, I suggest one of the following methods:
change the value of enforceRequired before you call saveDraft or publish. see example.
call $scope.$apply() after you change the value of enforceRequired. see another example.
I'm using angular chosen with angularstrap and i'm having problems with the initial value of the selector to be selected. The way i got it to work is i set a Timeout on the model attached to the selector to wait for the dom and then set the model value. So my guess is that chosen needs to wait for the dom to be created before it can initialize the selected option.
$scope.showModal = function() {
myModal.$promise.then(myModal.show);
// hack to make chosen load
$timeout(function () {
myModal.$scope.SelectedColor = "green";
}, 500 );
};
in my opinion this timeout solution is not a good one and i would like to find a better way to set the model after the dom has been created.
This is because chosen directive is calling trigger("chosen:updated") before the DOM is actually loaded. A fix would be adding $timeout() to the $watchCollection trigger.
This has been discussed and looks like the solution is here in the answer from kirliam.
Someone should issue a pull request for this issue.
edit: I issued a pull request for a fix regarding this issue. Hope it gets merged in.