ie 11 + angularjs not finding scope from angular.element("#idName")

Question

Today I came up against an issue with IE 11 and AngularJS that I am hoping someone has seen before.

I am bootstrapping my angular app and searching for an id element set as a placeholder in a modal and the loading a template view into ng-view depending on the app state. In Chrome and IE 10 this works fine. However, in IE 11 this doesn't. The error I am given is

Unable to get property 'reloadAndChooseView' of undefined or null reference

The undefined or null should be the scope found when calling

function chooseView(angular) {
        var scope = angular.element('#edit-listing-page').scope();
        scope.reloadAndChooseView();
    }

once the app is bootstrapped I call chooseView which looks through the dom to find the element id and pulls the scope which is where the reloadAndChooseView() function is called. this just selects a route and loads the template into ng-view.

below is the function used to bootstrap my app

var boostrap = function (angular) {
            angular.element(document).ready(function () {
                angular.bootstrap(document.getElementById("edit-listing-page"), ['app']);
            });
        };

As mentioned above this is not an issue in Chrome, IE10 or Firefox. This only seems to be an issue with IE 11.

I have tried setting the X-UA-Compatible to IE 10, 9 and 8 compatibility mode to see if this rectifies this issue, but this did not help at all.

Does anyone have a suggestions

Pangolin · Accepted Answer · 2015-01-19 13:51:28Z

1

In instances where IE is being prohibitive, I tend to use a vanilla Javascript when available.

In your case, you might try the following just to ensure the element is being properly selected:

var foo = document.getElementByID('edit-listing-page');
var el = angular.element(foo);

You might also want to try wrapping your selector function in a $timeout (be sure to include #timeout as a controller argument first):

angular.controller('fooCtrl', function($timeout, $scope) {
  $timeout(function() {
    //No need to re-declare 'angular' in the arguments list
    var el = document.getElementByID('edit-listing-page');
    var scope = angular.element(el).scope();
    scope.reloadAndChooseView();
  }, 0);
})

This will ensure your code only executes after the DOM has loaded.

edited Jan 19, 2015 at 13:51

answered Jan 19, 2015 at 13:43

Pangolin

1763 bronze badges

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

1 Comment

Ian Richards Over a year ago

I can't really use $timeout as this is not done inside a controller but inside a cshtml file so $timeout isn't available at the time this occurs.

Collectives™ on Stack Overflow

ie 11 + angularjs not finding scope from angular.element("#idName")

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related