$http.post(url, data).then(function (response) {
// TypeError: Cannot read property '$destroy' of null
$state.go('some.page');
// No Error
$timeout(function () {
$state.go('some.page');
}, 500);
});
500ms delay prevent from error.
Why instant page change gives "Cannot read property '$destroy' of null" error?
My initial thought on this was wondering where the best place to use $state.go is. I have always used it in the controller and didn't even know you could do it in the service... But at the end of the day, it shouldn't matter. So I did some googling on it and found this issue on github! It seems to have the same problem that was solved with a timeout but just by moving the $state.go into the controller fixes it as well.
https://github.com/angular-ui/ui-router/issues/403
Hope it this helps!
Edit: Here is another stackoverflow question about something similar
AngularJS behaving strangely when there's a nested relationship of promises in services
Related
I try to abort a ui-router transition without having an error log entry, i cannot use transition.abort() because i have to wait for a user input ("unsaved changes. continue?") so i return a promise.
$transitions.onExit({exiting: 'main.settings'}, function(transition) {
var deferred = $q.defer();
// promise testing
$timeout(function(){
// here i need to create a Rejection Object with type = RejectType.ABORTED
deferred.reject(false);
}, 500);
return deferred.promise;
});
If i reject the promise, i get the error log entry, because i don't know, how to create a Rejection with a RejectType.ABORTED in my controller. How can i get access to the Rejection Class?
Or is there any other way, how i can abort a transition asynchronously without creating a error log entry?
Using Angular 1.5.1 and ui-router 1.0.5.
Also asked at https://github.com/ui-router/core/issues/35.
Thanks
Returning rejected promise or false value in transition hook seems like the most natural way to abort the transition.
However if you don't want to clutter the log with the error messages you need to provide defaultErrorHandler() as described here - https://ui-router.github.io/ng1/docs/latest/classes/state.stateservice.html#defaulterrorhandler
If you would like to process some specific transitions errors you need to
provide onError hook for this as described here - https://ui-router.github.io/ng1/docs/latest/classes/transition.transition-1.html#onerror
I solved this issue by defining my own defaultErrorHandler(). Now i can prevent error messages to show up after aborting a transition.
Thanks # Pavel Bely
I have a general angular question:
I got the same error as here:
https://github.com/angular-ui/bootstrap/issues/516.
Can this error ("$apply already in progress ") be a problem in my app? In my tests It seems that this error has no effects on my application. Every task inside still works.
Is it unproblematic to go with this error into the productive system?
Thank you very much.
This usually happens when you try to run $scope.$apply and there is already one $apply in progress. A workaround that always prevents this error for me is to use $timeout instead of $scope.$apply.
You stuck into this issue as your code try to trigger digest cycle before one got completed and that you are facing only in IE probably because of slow nature of IE. so my idea is to use $scope.$evalAsync
$scope.$evalAsync(function () {
console.log('I am done.');
});
OR
$scope.$evalAsync(angular.noop);
I hope this work for you.
Thanks
Our Mobile App is getting "TypeError: Attempted to assign to readonly property." only on IOS 8 and the stack traces are not helpful and seem to be in Angular code.
This might be happening because of the "use strict" on top level of Angularjs code.
My questions are (1) why did it start happening only on IOS8? is this an IOS8 bug?
(2) or is this an angular bug surfaced on IOS8? (3) Or maybe we are violating strict mode rules but only IOS8 started to catch them! I am skeptical about the third option because strict mode is supported by other major browsers.
I have found one similar reported issue here.
Looks like this is an IOS8 bug
At least the guys at ember.js will temporarily strip the 'use strict' from their code until it's fixed.
Ember.js issue
SOLUTION -
Note:
angular.copy didn't work for me
lodash cloneDeep didn't work either.
removing "use strict"; didn't help - It just removed the error being logged in a try/catch arround the "erroneous" assignment to a readonly value
For us, the value that was being passed back from the SQL promise value was an array of objects.
The values that we were getting "read only" error on were strings, bools, and numbers.
console.log('this will log');
sqlReturnArray[0].name = "Bob"; // read only error here
console.log('wouldnt get to here to log');
I figured, well, if I can't assign values to properties on THOSE objects within the array, why can't I just copy over all the objects' values? Assignment of objects is by reference so just doing a loop over the array won't help. You need to loop over the keys and values.
This solved our problem
// where sqlReturnArray is the object given from the SQL promise
var newArrayOfObjects = [];
angular.forEach(sqlReturnArray, function (obj) {
var newObj = {};
angular.forEach(obj, function (val, key) {
newObj[key] = val;
});
newArrayOfObjects.push(newObj);
});
I just had this error and the fix was pretty simple.
My Code was-
$http.get('/api/v1/somedata').then(function(result){
$scope.data.somedata = result.data.list;
});
I get the TypeError in the assign. Because I haven't defined $scope.data.somedata anywhere and it got $scope.data undefined and trying to assign some property to it initiated the error.
I simply put $scope.data = {somedata : [] } in the top of the controller. I can also get rid of this error by changing $scope.data.somedata to $scope.somedata because any property of the $scope object that is undefined will end up to the $rootscope and won't give any error. I found this is pretty hard to debug my view-model. And also for this TypeError I can find out what exactly is wrong.
I had it with a form.
my issue was because of binding an SQL Return Object to an input.
after coping with angular.copy() problem resolved.
try to copy your return values and retry.
$scope.yourFunc= function(result) {
var item = angular.copy(result.rows.item(0));
...
};
I need to execute a function which is defined in controller in load-time, in order to gain json data from another place right after page is loaded.
I've tried to call the func immediately within controller, now i feel it was bad idea.
When something bad is happen and exception is raised - the controller stops working.
Well, not big surprise, but at the moment i don't have idea how work it out.
Ofcourse, i can wrap possible dangerous code in try-catch, but that's definetely not best solution imho.Here's the sample code:
app.controller("ServerStatusCtrl",
function($scope) {
$scope.reloadFunc = function()
{
throw "dat bad exception";
}
$scope.reloadFunc(); // Let's pretend that it's needed 2 call this function in load-time.
});
And example on jsfiddle
I advice you to use $q's way of notifying that something happen: return promise and reject it after something wrong happen.
This is the way how exception handling is done in async/promise way.
General idea is:
Instead of returning result, function should return promise
When you have your data ready (loaded from server) you resolve promise
If something bad happen you reject it.
function someFunc() {
var d = $q.defer();
do.somethingAsync(function(result) {
if (somethingWrong) d.reject(result);
else d.resolve(result);
});
return d.promise;
}
And in controller:
$scope.myData = someFunc().then(function ok(result) { return ok.data; }, function faled() { handle...});
This gives a good control on error handling/recovery.
Found easier solution for this.
Just discovered a ngInit directive which solved the whole problem.
Also, i think that module.run(fn) would be also applicable for this kind of tasks.
I'm trying to update a record in DB so I'm defining model with data and calling .save() method. The PUT request is triggered and the database entry is updated. The problem is neither success or error callbacks are called. What could be the cause?
sessionsModel.save({
error: function() {
alert('test');
},
success: function () {
alert('test');
}
});
Edit: Request returns JSON object
Just found similar problem where the issue was solved. You have to put something as first parameter (I put null since my model was already populated with data explicitly) and object with callbacks as second. So something like;
sessionsModel.save(null, {success:function() {} });
While searching on this, I first landed on this SO thread which did not work for me, but seemed to work for other, later on I bumped into this link, where some one had tried null instead of {} as the first parameter.
this.model.save(null, {
success: function (model, response) {
console.log("success");
},
error: function (model, response) {
console.log("error");
}
});
so, this worked for me. Hope this helps you too.
Your server must return a JSON object. If the response is not a JSON object, the callbacks will not fire.
Check this solution https://stackoverflow.com/a/22176044/1579718
I was suffering this issue - but was struggling because my server was responding with a valid JSON object (the model) and I was already using null in my save call.
As I (eventually) found, before the success callback is fired, the returned model is passed through the validate method. In my case I had a (obvious when you're looking in the right place) problem which caused the returned model to be deemed invalid and subsequently prevent the success callback.
Whilst I appreciate this doesn't help the OP, I post this in the hope it helps someone else having the same issue.