2-channel data binding problem using IE 11 with AngularJS

Question

Recently, I created a function in our web application using AngularJS, and I had some problems with IE 11, $apply() did not modify the data in the DOM correctly. For some reason this only happens occasionally and never occurs when I try to debug a problem that makes it look like a time problem.

Here is the function that is called when a 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 above comment shows why this appears to be causing the problem. At this stage of code execution, Angular should automatically check for a change in $scope.Throttling , and then make changes to the DOM accordingly, however, for some reason, in IE 11, the first visit to the page does not happen.

Subsequent page updates make the binding work, but it seems very strange. It looks like $scope.$apply() is required after API.Migrations.getThrottles , but I cannot do this because Angular throws a JS error saying that it is already being digested.

Some notes:

• This only happens in IE.
• This only happens when you first visit the page to load the browser (I can press F5 and try the same thing, and it will work)
• Could this happen because my API.Migrations.getThrottles call is inside the callback function for the module MYAPP.modals.Throttling , which is completely outside Angular?
• When I try to debug the JS function above, everything works just fine, which makes it look like a time issue.

Any help in figuring out what causes this error would be greatly appreciated!

thanks

Answer 1

for reference, found a 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'; 

Answer 2

I think I found my problem! I finally tried to print the data coming back from the server to the DOM without using a debugger, and I realized that the API response DOES NOT return me new data! It sends back cached data that is no longer valid, so objects are not displayed in the DOM. This also explains why using the debugger works because it causes every API call not to be cached!

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