AngularJS and Internet Explorer

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?

回答1:

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]-->

回答2:

Whenever I got these type of errors in IE (specially 8) It was either one of these 2 issues.

1) I was using a custom tag like <auto-complete> and was not using document.createElement

2) I had elements with duplicate id attributes. IE does not like this.

Method of elimination normally works for me to isolate the problem in the template.