I have a download function, which has a promise called onProgress(which returns download percentage), I want to go to some other view and come back. Even though controller's scope is with proper data the page is not getting refreshed with new data.
Even with this vague description it sounds like the onProgress() function is not in "angular world". Therefore, any changes to $scope that you make in the promise callback will not be noticed by angular until the next digest cycle.
The solution is easy: inside the onProgress() promise callback, wrap your changes to $scope in $apply:
onProgress().then(function(percent)
{
$scope.$apply(function() {
// your changes to $scope here, so that angular notices them
}
}
Related
I am reading
http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/
directive link function:
element.bind('click', function() {
scope.foo++;
scope.bar++;
scope.$apply();
});
a better way for using $apply:
element.bind('click', function() {
scope.$apply(function(){
scope.foo++;
scope.bar++;
});
});
What’s the difference? The difference is that in the first version, we are updating the values outside the angular context so if that throws an error, Angular will never know. Obviously in this tiny toy example it won’t make much difference, but imagine that we have an alert box to show errors to our users and we have a 3rd party library that does a network call and it fails. If we don’t wrap it inside an $apply, Angular will never know about the failure and the alert box won’t be there.
Confusion:
Why angular need to know error, i just need to show it for users. for example, there is an ajax request in link fn of directive, I just need to tell what happened if fails.
TAngular $scope has a function called $apply() which takes a function as an argument. AngularJS says that it will know about model mutation only if that mutation is done inside $apply(). So you simply need to put the code that changes models inside a function and call $scope.apply(), passing that function as an argument. After the $apply() function call ends, AngularJS knows that some model changes might have occurred. It then starts a digest cycle by calling another function —- $rootScope.$digest() — which propagates to all child scopes. In the digest cycle watchers are called to check if the model value has changed. if a value has changed, the corresponding listener function then gets called. Now it’s upto the listener how it handles the model changes.
The Ajax call through Angular buildin $http the model mutation code is implicitly wrapped withing $apply() call, so you don’t need any additional steps.
As my app initializes, the call to the api happens:
.run(function($ionicPlatform, $http, $localstorage, $model) {
$http.get($model.apiurl).success(function(data) {
$localstorage.setObject('data', data);
// reload template here!
});
})
When the api call has succeeded and the localstorage object is set, I want to reload my template (tab-categories.html) so the data can be displayed. How do I do this, ngRoute, stateProvider, ... ?
You might be missing the point of angular if you ask this question. If your template has values which are bound to a model, then changing those values will automatically update the view on the next digest. It is possible that your asynchronous code (the request) does not trigger a digest, in which case you will have to do it manually. There are many ways to do that: digest and apply
One simple way is to inject $timeout, and do a zero duration timeout (no time argument) with the sensitive code in the body of the function you pass in
Edit: so to answer your question more directly, you should be storing your data somewhere in your application when the call succeeds, and then rely on the angularjs digest loop to update your view. That's one of angulars big work saving features.
Use $route.reload(); method to reload entire page after your successful Transaction, be sure to add dependency injection '$route' in your Controller.
So I realized that doing changes outside the angular-bounds, like in an async AJAX callback, will not make angular call $apply on the scope. So far I have solved these issues by calling $scope.$apply() after changes have been made, but this time the function is not located in the same scope. The method lies in a factory, and is called from a controller.
I have tried sending the scope as a parameter from the controller to the factory, which does in fact work, but is not pretty as I expect to have many methods like this, and sending an additional parameter each time seems ugly.
Any ideas?
Angular is loosing my my JSON values, and i'm trying to find out why. I think I need to make a promise or a time out, or maybe apply. I'm not quite sure...
angular version: 1.2.1
galleryApp.controller('GalleryCtrl', function ($scope, $http, $routeParams, $filter){
$http.get('mygallery.json').success(function(data) {
$scope.gallery = data;
//DISPLAY: CONTENTS OF JSON IN OBJECT : WORKS
console.log($scope.gallery);
});
//DISPLAY: undefined : DOES NOT WORK AS EXPECTED
console.log($scope.gallery);
//DISPLAY: CONTENTS OF OBJECT: I can see scope.gallery exists!
//I just can't seem to access scope.gallery directly outside of http.get()
console.log($scope);
});
Note: scope.gallery or "gallery" works perfectly fine in my view! {{gallery.name}} etc.
It seems like there is some behind the scenes things angular is doing to the scope, or some concept that i'm not quite grasping.
Well, it's trivial as $http.get is an asynchronous operation. So while it is working the rest of the code will be finished. If you log the $scope.gallery it is undefined yet. If you log the $scope it's still undefined but will be updated when the success callback is invoked. Th reason of this effect for you is just feature of console.log which writes not the current snapshot but the object itself so if changed the output of the console will be updated respectively. But in general none of your code outside of the $http.get will work as you expected here. So you should either use the success callback or use $watch to track the changes.
Also refer to this documentation: $http, $q
The result of http.$get is a promise (specifically an HtmlPromise, see the $http docs). A promise is described as the following in the $q docs:
an interface for interacting with an object that represents the result of an action that is performed asynchronously, and may or may not be finished at any given point in time
The success method of an HtmlPromise takes a callback function to run once the promise is resolved (meaning the action is complete). The anonymous function thus runs asynchronously. When it is logged outside of the callback, the callback has not yet been run and therefore the scope variable has not been set.
I imagine the view is as expected because the http request completes and the view is updated so fast, it is imperceivable.
If a ng-model changed in View, the $scope will be updated correspondingly, but if there is a {{x()}} in the View and a $scope.x=function(){} in the js part, is it that when any event or stuff happens in the view, the x() will be triggered?
I am not quite clear about the principle of AngularJs' event and functioning.
Most of the times Angular will properly handle $scope.x=function(){} and update views automatically.
That's because there are only a few moments in application execution time when your code is executed such as page load, AJAX callback etc. Angular knows about such moments and does dirty checking (comparing scope values before and after).
However, there might be times when Angular doesn't aware that you updating scope properties, for example when you integrating with some 3rd party plugins. In such cases you need to wrap your code, which changes scope properties in $scope.$apply method:
$scope.$apply(function(){
$scope.x = function(){};
});