{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Anthone 的问题《AngularJS errors in IE8》','https://www.manongdao.com/q-668062.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am working with a new angular app and need to make it backward compatible to IE8. From what it looks like it loads in my routing info, loads the template (to a point) but in the concole log i see the following error.
TypeError: Object doesn't support this property or method
<div class=ng-scope ng-view>
This is what my index html page looks like:
<!DOCTYPE html>
<html id="ng-app" ng-app="app">
<head>
<!--Add dependencies-->
<script src="jquery.min.js"></script>
<link rel="stylesheet" src="bootstrap.min.css" />
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script src="ui-bootstrap.js"></script>
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('menu');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
</head>
<body>
<div id="wrapper">
<header class="header header-fixed">
<section class="navbar navbar-inverse docs-navbar-primary">
<div class="container">
<div class="row">
<div class="col-md-7" style="color:white; margin-top:14px;">Thinflash: Fullscreen Demo</div>
</div>
</div>
</section>
</header>
<section role="main" class="container main-body">
<div ng-view></div>
</section>
<!--Add AngularJs Files-->
<script src="swfObject.js"></script>
<script src="app.js"></script>
<script src="appControllers.js"></script>
<script src="thinflash.js"></script>
</div>
</body>
</html>
Template.html :
<div ng-controller="thinflash.controllers.playback">
<div ng-controller="app.controllers.fullscreen">
<div class="mainWrapper" id="stageWrapper">
<label>SWF Object Display </label>
<div class="swfWrapper" style="width:320px; height:240px;" id="swfStage">
<div class="tf-container" tf-swf tf-interface="flashInterface" tf-src="thin.swf" tf-min-version="11.0.0"></div>
</div>
</div>
<div class="col-md-5">
<form role="form">
<!-- Video Playback Controls -->
<div class="row">
<div class="form-group col-md-7">
<label>Select Preloaded Video:</label>
<select class="form-control" ng-model="myVideo" ng-init="myVideo = videos[2]" ng-change="changeVideo(myVideo)" ng-options="v for v in videos"><option></option></select>
</div>
</div>
<div class="row">
<div class="form-group col-md-7">
<button type="button" class="btn btn-primary" ng-click="pausePlaybackToggle()">Pause</button>
<button type="button" class="btn btn-primary" ng-click="playVideo()">Play</button>
</div>
</div>
<div class="row">
<div class="form-group col-md-7">
<label>Volume Control:</label>
<input style="width:50%;" type="range" id="slider" min="1" max="100" step="1" ng-model="volume" ng-change="changeVolume()">
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label>Size Controls:</label><br/>
<button type="button" class="btn btn-primary" ng-click="changeVideoSize(1)">Small</button>
<button type="button" class="btn btn-primary" ng-click="changeVideoSize(2)">Medium</button>
<button type="button" class="btn btn-primary" ng-click="changeVideoSize(3)">Large</button>
</div>
</div>
</form>
</div>
</div>
</div>
Again when the app loads in IE8 it appears that the template loads (or starts too ... but i get this error)
Add html5 support for IE8 by using something like html5shiv or this little snippet:
Edit
Fixing an "Object does not support this method or property" on IE can be a beast, cause it isn't telling you anything. It's not telling you what object, it's not telling you what property, it's not telling you what method and worst of all it's not telling you where this actually occurred. See the pattern? Effectively it's saying; something bad has happened somewhere, go figure. This is one of the reasons why everyone loves IE.
Adding the above snippet has probably solved a problem but then another problem popped up, which produced the same brilliant error message. Fixing this breadcrumb adventure of error messages by posting each new involved piece of html can take a very long time and should rather be discussed with the helpdesk of IE. They have an answering machine telling you to upgrade to their new crappy box of other issues. Troubleshooting this problem via Stackoverflow is like shooting satellites out of the sky with a water pistol, in the dark, blindfolded and drunk.
Some other things you might consider:
I wanted to take a second and answer this incase someone else has the same type of thing happen. I tried to polyFill and that didnt work so I tried running the code in IE9 while running in IE8 mode hoping to get a different error .... Voila ....
null hit the nail on the head ... it was in the JS and it was because I was doing document.addListener(). Luckily I was able to quicly decide that the functionality that this supported was not important enough to pull my hair out so i removed that line in my js...
Everything else worked .... Hopefully this can be of some help to someone in the future as IE provides stellar error messages