I do have a message system where all the inbox messages are displayed:
<div ng-repeat="msg in inbox.messages">
// here the message
</div>
Works fine. Now i want to use a polling system to get possible new messages, sent by other users. I wrote a pollingService with this piece of code:
$timeout(function() {
$rootScope.inbox = MessagesInbox.get();
self.run();
}, 10000);
Now each 10 seconds, the messages are pulled with ajax and are assigned to inbox. Now the ng-repeat updates... But it is ugly because is is rendered again and thus blinking the page.
Is there a way to update my messages another way, so that it will look neat?
You could do a comparison of what is currently in the inbox vs. what comes back from the service, and then add/delete/edit only those records that have changed.
Related
I'm developing an Ionic application for the Android platform and I've ran into the following problem using Angularfire's $loaded/$watch function.
The controller uses AngularFire's $firebaseObject to retrieve student information, and then uses the $loaded function to print a message once the data is retrieved. Similarly, it uses a $watch to print a message when the data changes.
The problem is that sometimes these messages do not get printed to the console when the view is visited. Let's say neither of the messages get printed, by navigating to another controller, they get printed to the console.
Sometimes, the $loaded message will be printed, but the $watch will not be triggered when changes are made in Firebase, until we navigate away to a different controller.
Sometimes, they both work perfectly.
Once thing I've noticed is that by force stopping the application and restarting it, the application behaves as intended.
var firebaseDatabase = FirebaseService.getFirebaseDatabase();
var student = $firebaseObject(firebaseDatabase.ref('randomstudentid/'));
student.$loaded().then(function(){
console.log("The student information has been loaded.");
});
student.$watch(function(){
console.log("A watch has been triggered on the student information.");
});
Thanks in advance for your help.
I am pretty new with angular js. My use case is We have a parent page say parentPage.html where we have a link. On click of this link in parentPage I want to send a server hit to a spring controller, which should return us a json response. I want to paste this response in the new window against the childpage.html. How can we achieve this by angular js?
parentPage.html:
Show New Customer
ajax response on click of above link:
{
customerName:'Adam',
address:'XYZ',
}
childPage.html(we have to iterate over the above key value pairs such that our result should be painted in the following way:-)
<table>
<tr>
<td>customerName:</td>
<td>Adam:</td>
</tr>
<tr>
<td>address:</td>
<td>XYZ:</td>
</tr>
</table>
On google I found enough stuff about the means by which we have to bring things within the scope. My only confusion in this usecase is, since we have to open a new window after sending the http get request(which is being sent from the parentPage.html), the response of which is to be painted in an absolutely new window(which is childPage.html), so isn't this scope going to get lost somewhere since we are not dealing with SPA thing here? Can we achieve this by angular in any possible way?
Since angular is meant to work off a one page application and retain the state of most javascript throughout the duration of the application being ran, you really have two option.
The first is to take that JSON response and store it in local storage.
window.localStorage.setItem('key', value);
By doing this, you will be able to pull the value back out at any point by use of the following
value = window.localStorage.getItem('key');
In most cases, you would want to stringify() the JSON before parsing it all out again.
This is one implementation which would definitely work out for you.
Another option would be to make use of ng-model, models are used to store and manipulate data in angularjs, By passing around these values back to your controllers you will be able to easily hold and interact with the state of these variables.
Im making a poll app where people can create a new poll (question and responses) then that gets pushed to my firebase database and the questions get populated as a list in the left side bar. I got that far and it works great.
Now i'm trying to make the take a poll feature so when a person clicks on the question they want to respond to, it updates the view for just that one question and ng-repeat for the number of responses there are.
Is there a firebase event handling similar to jquerys on click for .this to do this? How can I accomplish this, I feel stuck.
So I figured it out. For the nav bar on the left in my anchor tag within a ng repeat. I used a ng-click = "select(poll)" where poll being the ng-repeat = poll in polls
then in my controller I have this simple function
$scope.select = function(poll){
$scope.selected = poll;
};
which then in my takeApollview (i'm using ui-router) I just use the selected to display all the key values.
Msg me if anyone has a similar problem and needs guidance.
I've been following this tutorial http://draptik.github.io/blog/2013/07/28/restful-crud-with-angularjs/. I implemented a Grails backend with it instead of the Java one in the tutorial.
I've got the data coming back and forth, with one issue. If I create/update/delete a user, I don't see the changes reflected on my user list when I am redirected back. I have to refresh the page to see the updates.
Looking at the network traffic for an edit, it looks like it does a PUT and fires off the GET before the PUT is complete. Assuming this is because $resource returns a promise so things can be done asynchronously. So how do I handle this so that when $location redirects me, my list is up to date?
I'm guessing the options are to wait for the PUT to complete before redirecting/querying for the list, or to somehow manually manage the $scope.users to match the request?
Or maybe this tutorial is just a bad example? Maybe there is a better way to do it (still using $resource)?
Note: I've seen Restangular out there, and I've seen $http with success callbacks, but I would like to understand the situation above.
One way to overcome this issue would be to not redirect to the list page, till you get a callback, and then do a redirect. You can show some busy indicator till that time. The resource call looks like this.
resource.update(config,data,function() { //gets called on success},
function(error) { //gets called on failure});
In real life scenario waiting for the response of update makes sense as you want to handle the error and success scenarios on the same page.
I don't see your code anywhere so i'm just assuming (based on what you wrote and your current problem)
You are probably doing a full (or partial) get each time you changed a user and (re)binding the result to your scope. Doing this in the callback of the resource should actually start the digest cycle angular does to update modified objects. If you had been doing the fetching outside $resource - for example with custom/jquery ajax you would need to execute $scope.$apply()
What i really don't understand you would need to wait for the callback. You already know you added/modified a user. Instead of 'detaching' that user from your scope, modify it, post it to your rest server, then wait for callback, and reinserting it into the scope - why not modify it directly in the list/array you put on your scope?
var users = Users.get(function () {
$scope.users = users.record; // bind the resulting records to the scope
});
$scope.updateUser = function (user) {
resource.update(...); //pseudo
};
Then in your html, you will keep a reference to the currentUser and the div-list will update automaticly.
<div ng-repeat="user in users" ng-click="currentUser=user">{{user.Name}}</div>
<input ng-model="currentUser.Name">
<button ng-click="updateUser(currentUser);">Update</button>
If you don't want to see the update in the list while you type, but only once your callback fires or when you hit the button, would would instead use another ng-model for your input like this:
<input ng-model="tempUser.Name">
And you would then copy the value other in either the updateUser method or in the resource callback like this:
$scope.updateUser = function (user) {
user.Name = $scope.tempUser.Name; // should update automaticly
resource.update(...) // pseudo
}
Hope it helped!
I have hundred rows in my view. I would like to process all those rows one by one.
Every row has status
Not Complete (by default)
Complete
Processing
I would like to change status of each row before and after finish processing in controller.
Before finishing I would like to change status to processing and after finishing, I like to change complete.
<tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse ">
<td>{{item.id}}</td>
<td>{{item.fname}}</td>
<td>{{item.lname}}</td>
<td>
<span ng-class="class{{item.id}}"></span>
</td>
</tr>
in controller I have
$scope.startSending = function() {
$scope.filteredItems.forEach(function(entry) {
// Throwing Error! How can dynamically get value of scope variable
$scope.'class'+entry.id = 'icon-eye-open';
});
};
Please advise how can I get value of dynamical named variable from $scope above in controller.
I would like to update my database as well, If I add $http in foreach loop.
$http.post('/someUrl', data).success(successCallback);
it will send all 100 requests all together. Can I execute each request one after another in queue?
I want to send request in queue, it should not send second request before completion of first request etc...
any idea?
Thanks
With respect to Please advise how can I get value of dynamical named variable from $scope above in controller. the answer is Javascript and not AngularJS related. Just do:
$scope['class' + entry.id] = 'icon-eye-open';
With respect to queueing the $http requests, you want to check out the various asynchronous flow control solutions. I've used in a Node.js app caolan's async and it's very nice. You can find it in github and a fine tutorial is available here. I believe that in your case you need a forEachSeries.
(Please try to limit each post to 1 question or if not possible at least to N related questions.)