angular.element('#someId').scope() is returning undefined in IE 9

Question

I am using angular.js 1.2.13. I am using a third party tool which uses angular.js and to integrate within my project I am using angular.js code in my .js file.

To get scope data, I am using .scope() on HTML element. It is working fine in chrome and mozilla, but on IE 9, angular.element('#someId').scope() is returning undefined.

I have debugged and found that angular.element('#someId') is returning the expected element but .scope() on that is returning undefined.

On angular.js's website, it is written that 1.2.X is perfectly compatible with IE9. Why am I getting this error.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


//This code is written in external js file appConfig.js which is imported after angular.js
angular.module('modelerApp', []).run(['$rootScope', function($rootScope){

    //This function is defined by me
    $rootScope.bootstrap = function() {
        //some logic needs to be executed here which should happen only after page load, so I am keeping it inside rootscope
    }

}]);


<script type="text/javascript">
//This code is written in external js file which is getting imported in this page
  $(document).ready(function(){

    var scope = angular.element('#someId').scope(); //undefined

    //I need scope to access rootscope of angular in order to execute logic inside bootstrap method
    var rootScope = scope.$root; 

    //I want to execute logic written in bootstrap method, which is in $rootScope
    //This logic uses angular js routes and all, and thus needs to be inside angular code.
    //This has nothing to do with specific controller
    rootScope.bootstrap();

  });

</script>

<div ng-app="modelerApp" ng-controller="itemController">
  <div id="main">
    <div id="someId">
    </div>
  </div>
</div>

Any help is appreciated.

what about other browsers? is it undefined too in those? – Jai Dec 24 '15 at 09:46 — Jai, Dec 24 '15 at 09:46
it is working in other browsers(chrome & mozilla firefox) – Pankaj Dec 24 '15 at 09:52 — Pankaj, Dec 24 '15 at 09:52

score 0 · Answer 1 · edited May 23 '17 at 12:16

You are trying to access the scope outside of angular scope and you are not at the path of angular, You should not use angular with jQuery this way but include jQuery above angular to take advantage of jQuery instead of jqLite of angular:

angular.module('modelerApp', []).controller('itemController', function($scope) {

  var scope = angular.element($('#someId')).scope(); //undefined
  $scope.obj = {
    scopeId: scope.$id
  };
  //console.log(scope.$id);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="modelerApp" ng-controller="itemController">
  {{obj.scopeId}}
  <div id="main">
    <div id="someId">
    </div>
  </div>
</div>

A detailed post about thinking in angular if one has a jquery background.

Actually I have imported jQuery. The special case here is that I have to execute some logic, but only on page ready event. The code uses angular routes and other features, thus I have extracted that in one function and kept it inside rootScope in run function. To acces rootscope, I am using scope which is returned as undefined in IE 9. For more understanding you can refer question which I have edited. — Pankaj, Dec 24 '15 at 10:36

angular.element('#someId').scope() is returning undefined in IE 9

1 Answers1