Angularjs error in IE 7 Object does not support property or method 'querySelector'
I am representing angularjs in an existing asp.net project and there are many assertions in the project that will only work in IE 7 compatibility mode, but when I run the project I get the following error from the angularjs file
Object doesn't support property or method 'querySelector'
after a little R&D on this question, I realized that querySelector was only introduced from IE 8.
Now how can I get my app to work in IE 7 using angularjs.?
I don't want to set the meta tag more than i.e. 7 as my existing application has a dependency on i.e. 7, which won't work like 8 and up.
I tried to configure angular module to disable SCE like this:
var rtApp = angular.module("realTimeNotifications", []).config(function($sceProvider) {
// Completely disable SCE to support IE7.
$sceProvider.enabled(false);
});
but still no luck.
Thanks in advance.
source to share
I also struggled with IE7 and IE6 compatibility and found that using version 1.1.5 instead of version 1.2.25 prevents the error you described.
Can angular be used in IE6 and IE7 outside of this simple example. Another thing.
The code below has been tested in IE6,7,8,9,11 on a domain with compatibility mode set to ON.
My guess is that many parts of the example could be omitted. I'm just getting started with angular so can't guarantee that best practices are used. He should at least provide a starting point.
<!DOCTYPE html>
<html class="ng-app:phonecatApp" ng-app="phonecatApp" id="ng-app" xmlns:ng="http://angularjs.org" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE; IE=9; IE=8; IE=7" />
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="../stylesheets/html5.css">
<!--[if lte IE 7]>
<script src="../Includes/Client/JS/json2.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script type="text/javascript" src="es5-shim-4.0.3-min.js"></script>
<![endif]-->
<script type="text/javascript" src="html5shiv.min.js"></script>
<script type="text/javascript" src="angular-1.1.x.js"></script>
<script type="text/javascript">
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) {
$scope.phones = [
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.'},
{'name': 'Motorola XOOM™ with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.'},
{'name': 'MOTOROLA XOOM™',
'snippet': 'The Next, Next Generation tablet.'}
];
});
</script>
</head>
<body ng-controller="PhoneListCtrl">
<ul>
<li ng-repeat="phone in phones">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
source to share