Menu
I have problems getting my app loading on Internet Explorer 7 & 8 and even 9.
I'm getting the following error message (console)
Uncaught TypeError: Cannot read property 'nodeName' of undefined
On load the {{}} variables are loading and disappearing. Nothing has been rendered.
I added this to the html tag:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:ng="http://angularjs.org" id="ng-app" class="ng-app: myapp;">
I added ieshiv.js from the AngularUI framework.
I added
<!--[if lt IE 8]>
<script src="files/js/json3.min.js"></script>
<![endif]-->
(Question: is this enough, just adding to my head section or must I modify my code too?)
I also added this to my head section:
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
document.createElement('slide');
document.createElement('carousel');
// Optionally these for CSS
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');
</script>
<![endif]-->
And it doesn't work at all. No variables are loaded, not list is rendered and the website isn't working.
Chrome, FF and Opera are working fine.
Do you have any hints where to start ?
EDIT 1:
Link to my controller.js on paste.bin
http://pastebin.com/z67qE9ME
EDIT 2:
Is it maybe the order of the js loading?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<!--[if lt IE 8]>
<script src="files/js/json3.min.js"></script>
<![endif]-->
<script src="files/js/angular.min.js"></script>
<script src="files/js/ui-bootstrap-tpls-0.1.0-SNAPSHOT.js"></script>
<script src="files/js/angular-ui.js"></script>
<script src="files/js/angular-resource.min.js"></script>
<script src="files/js/controller.js"></script>
<script src="files/js/select2.js"></script>
<script src="files/js/main.js"></script>
EDIT 3:
Ok, I added fauxconsole.js to my script and cleaned the code and it worked. Well, at least it is loading properly (without any css correction). But it doesn't load inline style on some of my tags. Do you have an idea why?
<a ng-click="details.show=toggle(marker)" ng-class="{active_marker: active_marker.show == marker.id}" href="#/dealer/{{marker.id}}" class="marker" style="left:{{marker.coordleft}}px;top:{{marker.coordtop}}px">
</a></div>
EDIT 4:
Edit 3 is also solved with this help here:
https://groups.google.com/d/msg/angular/0zHsVuUryKI/ckTvY93NcRsJ
But I got now an other problem. In IE 8 and below the route template aren't rendering. I just see the {{}} variables and not more.
EDIT 5:
That is strange. I managed to load the first template right. All brackets {{}} are loading properly.
I added .resolve to my Ctrl:
// DealerDetailsCtrl
function DealerDetailsCtrl($scope, $rootScope, $routeParams, dealerService, datasets) {
$scope.loading = true;
// Abfrage
$rootScope.dealerdetails = datasets;
// inline styles fuer positionierung laden
$rootScope.itemStyle2 = function (item) {
return { left: item.divleft * 1 + 390 + 'px', top: item.divtop * 1 + 160 + 'px'};
};
//Feedback zur Message zurruecksetzen
$scope.issend = $rootScope.issend;
$rootScope.issend = false;
$scope.loading = false;
//Close Button
$rootScope.close = function() {
$rootScope.marker = null;
$rootScope.details = {show: false};
$rootScope.alldealer = {show: false};
$rootScope.active_marker = null;
};
$rootScope.$on("$routeChangeStart", function (event, next, current) {
$scope.loading = true;
});
}
DealerDetailsCtrl.resolve = {
datasets : function($q, $http, $route, $rootScope) {
var deferred = $q.defer();
$http.get('files/framework/dealer/'+ $route.current.params.id +'/' + $rootScope.token).success(function(data) {
deferred.resolve(data);
});
return deferred.promise;
}
};
The strange thing is. From the (correctly rendered) template, I link to a second template and route (from dealer/:id to /dealermessage/:id), but THIS route (and everything is the same including the resolve) isn't loading properly, same error than before, the template isn't rendered.
Routes:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/dealer/:id', {
templateUrl: 'files/tpl/dealer-details.html?333',
controller: 'DealerDetailsCtrl',
activetab: 'details',
resolve: DealerDetailsCtrl.resolve
}).
when('/dealermessage/:id', {
templateUrl: 'files/tpl/dealer-message.html?222',
controller: 'DealerMessageCtrl',
activetab: 'message',
resolve: DealerMessageCtrl.resolve
}).
when('/dealersendmessage/:id', {
templateUrl: 'files/tpl/dealer-details.html?444',
controller: 'DealerDetailsCtrl',
activetab: 'details',
resolve: DealerDetailsCtrl.resolve
}).
otherwise({
redirectTo: '/dealer'
});
}]);
Does anyone has a clue, what or where the mistake may be?
245
Supporting Internet Explorer in Angular is easy if you just remember where to find that polyfills. ts file. Finally, take a minute to stop by the core-js GitHub project and give it a star.
Browser Compatibility With AngularJS Angular offers a cross browser compatibility for web apps, with the recent versions of Angular supporting all the latest versions of browsers like Firefox, Chrome, Safari, and many more. Web applications developed in Angular sometimes may also include animations.
There can be numerous reasons why your Angular application is not working, including: Missing polyfills in polyfills. ts . Using a TypeScript target version which IE11 does not support.
AngularJS support has officially ended as of January 2022. Visit angular.io for the actively supported Angular.
The project Angular-UI contains a "subproject" named "IEShiv" which should let you run angular smoothly under IE : https://github.com/angular-ui/angular-ui/tree/master/common/ieshiv
As said there, you only need this :
<!--[if lte IE 8]> <script src="build/angular-ui-ieshiv.js"></script><![endif]-->
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
