2 way data binding issue using IE 11 with AngularJS

Question

I have recently built a feature on our web application that uses AngularJS and I am having some issues with IE 11 not properly $apply()ing data changes to the DOM. For some reason this only occurs sometimes and never occurs when I try to debug the problem which makes it seem like a timing issue.

Here is the function that gets called when the problem occurs.

$scope.createThrottling = function (sources) {
            MYAPP.modals.Throttling('New', sources, API, function () {
                $scope.isLoading = true;

                $scope.$apply();


                API.Migrations.getThrottles({ id: jQuery.getUrlVar('id') }, function (data) {
                    $scope.Throttles = data.Throttles;
                    $scope.isLoading = false;

                    // THE PROBLEM IS RIGHT HERE

                });


            });
        }

The comment above shows where the problem seems to be stemming from. At this point in the execution of the code, Angular should automatically be checking for a change in $scope.Throttling and then make a change to the DOM accordingly, however, for some reason in IE 11, on the first visit to the page the binding is not occurring.

Subsequent refreshes of the page cause the binding to work however which seems very strange. It is as if $scope.$apply() is needed after API.Migrations.getThrottles is finished, but I cannot do that because Angular throws a JS error saying that it is already digesting.

Some things to note:

This only happens in IE
This only happens on the first visit to a page per load of the browser (I can hit F5 and try the same exact thing and it will work)
Could this be occurring because my API.Migrations.getThrottles call is inside a callback function for the MYAPP.modals.Throttling module which is outside of Angular completely?
When I try to debug the JS function above, everything works just fine which makes it seem like a timing issue

Any help to finding out what is causing this bug would be much appreciated!

Thanks

Try moving the $scope.$apply call into the the getThrottles callback — Patrick Evans
– Patrick Evans, Commented Aug 19, 2014 at 23:41
That is what I tried. I mentioned above that doing so resulted in Angular throwing an error saying that it is already digesting — Matt Hintzke
– Matt Hintzke, Commented Aug 19, 2014 at 23:46
I tried using jQuery.on('throttleComplete', ... and jQuery.trigger('throttleComplete') to trigger the callback instead of actually using a callback and that did not help either — Matt Hintzke
– Matt Hintzke, Commented Aug 19, 2014 at 23:47
Did you delete $scope.$apply call from the .Throttling callback and only have it in the getThrottles callback — Patrick Evans
– Patrick Evans, Commented Aug 19, 2014 at 23:53
Actually I don't even need console.log().. if I have the debugger open at all then it works... i am beyond confused — Matt Hintzke
– Matt Hintzke, Commented Aug 20, 2014 at 0:32

Qiang Li · Accepted Answer · 2015-04-29 22:13:43Z

6

for the reference, found the solution here: http://www.oodlestechnologies.com/blogs/AngularJS-caching-issue-for-Internet-Explorer

$httpProvider.defaults.cache = false;
if (!$httpProvider.defaults.headers.get) {
    $httpProvider.defaults.headers.get = {};
}
$httpProvider.defaults.headers.get['If-Modified-Since'] = 'Thu, 01 Jan 1970 00:00:00 GMT';

answered Apr 29, 2015 at 22:13

Qiang Li

1,13111 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cabadath Over a year ago

This answer is pretty much spot on.

Ricky sharma Over a year ago

Thanks a lot....i spend whole day to solve this issue and in last culprit was cache.

Matt Hintzke · Accepted Answer · 2014-08-20 01:28:21Z

3

I think I have found my problem! I finally tried printing the data that is coming back from the server in the DOM without using the debugger and I realized that the API response is NOT giving me back new data! It is sending back cached data that is no longer valid which is why the objects are not showing up in the DOM. This also explains why using the debugger works because it forces each API call to not be cached!

I was able to fix this problem in my $resource by adding { _: Date.now() } in my params object in my $resource. This appends _=1234567890 to all GET calls for this $resource which forces IE to not cache

edited Aug 20, 2014 at 1:28

answered Aug 20, 2014 at 1:09

Matt Hintzke

8,03216 gold badges63 silver badges119 bronze badges

Collectives™ on Stack Overflow

2 way data binding issue using IE 11 with AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related