1

I'm encountering a weird issue on IE9. What I'm trying to do is opening a popup window from my page and attaching the scope of the page to the window object like:

angularApp.controller('ParentCtrl', function($scope, $window) {
    $window.parentScope = $scope;
    $window.open(url, popupName, params);
});

In my popup/child controller I'm using some property from the parent scope to populate data. Then in my popup page I have some controls which lets a user to pick certain persons from a multi select box. After the user clicks on Assign persons from the popup page I'm calling a method in my parent page like:

childApp.controller('ChildCtrl', function($scope, $window) {
    $window.opener.parentScope.updatePersons($scope.personInfo);
}

The method updatePersons is defined in the ParentCtrl as:

$scope.updatePersons = function(personInfo){
    $scope.$apply(function() {
        $scope.personInfo = personInfo;
    });
};

Until now everything works fine and the updated personInfo array is copied from popup to the parent page. Now when I again open the popup page from a button on the parent page the value of $scope.personInfo in ParentCtrl mysteriously gets set to undefined.

The personInfo array on the Parent page is used in a ng-repeat to show a tabular list of persons with their attributes and in IE9 I see undefined in all the columns of the table.

Apparently, Safari, Firefox and Chrome all work flawlessly and don't set the value of this scope variable to undefined when the popup page is clicked again. I've tried looking for a solution to this problem but have failed. I've put id="ng-app" at the root of my application and followed some IE caveats mentioned on angularJs project page but w/o any success. I would really appreciate any help from the community as it's a show stopper for my application.

I created a plunker to demo what I'm trying to achieve. Somehow the child page doesn't show parent scope values and the child can't update parent scope but that's working in my application.

http://plnkr.co/edit/E5pzzYOCMXHTK1huCAF5?p=preview

Thanks in advance for the help!

Improve this question
4
  • Minor edit: The personInfo variable(JSON array object) and it's attributes show up in the browser as undefined but when I inspect in IE developer tools it shows up as an empty Javascript object. Commented Aug 8, 2014 at 0:09
  • This issue seems to happen for version 8 and 10 also. Commented Aug 8, 2014 at 15:52
  • I spoke too soon. It doesn't seem to happen on IE 8. Only IE 9 and 10 as of now. Commented Aug 8, 2014 at 18:10
  • I see this error in IE 9 console: [$interpolate:interr] errors.angularjs.org/1.2.15/$interpolate/interr?p0= Commented Aug 8, 2014 at 19:48

2 Answers 2

Reset to default
2

The plnkr example wasn't working for me in Chrome or IE.

It, for some reason, was trying to put duplicate values into the repeater. Tracking the repeat items by index fixed the issues I had with the example.

<div ng-repeat="person in personInfo track by $index">

Edit: To clarify - the plnkr worked in both Chrome and an emulated IE9 (IE11 emulating IE9) session after adding the track by.

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

11 Comments

Thanks @davidmdem, it worked by adding track by $index, but if you click on open child again you will find that in IE 9 the latest value populated from the child is changed to undefined, undefined. You can see it happening here: plnkr.co/edit/#/E5pzzYOCMXHTK1huCAF5?p=preview
I tried to solve it by changing the updatePersons method in script.js to use angular.copy while assigning $scope.personInfo to personInfo.
In my application now IE 9 doesn't render undefined after using angular.copy but the new scope value is now converted into a Javascript object and not an array. That is causing other problems like length method doesn't show anything or when I want to iterate over the array it doesn't work.
@davidmdemDo you know how can I convert Javascript object created by angular.copy into an Javascript array so I can work with it? I don't know why IE is converting an array into an object with angular.copy while every other browser creates a deep copy of original array.
I was just testing that actually, but won't be cash to a comp for an hour or so. Copy is definitely the right answer. You should be able to get rid of the track bys now that it's copying. My only thought without being able to test is that copy wants the destination object to be an array. Is it initialized as an empty array before copying?
|
0

I ended up solving the issue by using angular.copy to send data from parent to popup and then while updating personInfo from popup to parent. It worked to some extent so much so that the personInfo object wasn't getting set to undefined when i clicked on the popup again.

But I encountered another problem when I was receiving the updated data from popup to parent. My personInfo array had 2 nested JS arrays within it and when I was receiving the array from popup everything was fine but when I assigned it to my parent scope using $scope.personInfo = angular.copy(personInfo) the two nested JS arrays within $scope.personInfo converted to JS objects and length method didn't work on them.

The only way I could solve this was to iterate over each person object and then check if any of the arrays had length property undefined and then use jQuery's map function to convert those objects back into JS arrays. It's a silly hack but if anyone knows why is it happening on IE and what's the best angular way to do it that would be awesome!

I still don't get it why IE is treating the array differently when all other browsers seem to work fine. Also, why do I have to use angular.copy everywhere to make IE happy!!!

Thanks!

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.