title: AngularJS and Internet Explorer
body: <p>I have problems getting my app loading on Internet Explorer 7 &amp; 8 and even 9.  </p>
  
  <p>I'm getting the following error message (console)  </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'nodeName' of undefined   
  </code></pre>
  
  <p>On load the {{}} variables are loading and disappearing. Nothing has been rendered.<br>
  I added this to the html tag:  </p>
  
  <pre><code>&lt;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;"&gt;  
  </code></pre>
  
  <p>I added ieshiv.js from the AngularUI framework.<br>
  I added  </p>
  
  <pre><code>&lt;!--[if lt IE 8]&gt;
       &lt;script src="files/js/json3.min.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;  
  </code></pre>
  
  <p>(Question: is this enough, just adding to my head section or must I modify my code too?)  </p>
  
  <p>I also added this to my head section:  </p>
  
  <pre><code>&lt;!--[if lte IE 8]&gt;
        &lt;script&gt;
          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');
        &lt;/script&gt;
      &lt;![endif]--&gt;  
  </code></pre>
  
  <p>And it doesn't work at all. No variables are loaded, not list is rendered and the website isn't working.<br>
  Chrome, FF and Opera are working fine.  </p>
  
  <p>Do you have any hints where to start ?    </p>
  
  <p><strong>EDIT 1:</strong><br>
  Link to my controller.js on paste.bin<br>
  <a href="http://pastebin.com/z67qE9ME" rel="noreferrer">http://pastebin.com/z67qE9ME</a>  </p>
  
  <p><strong>EDIT 2:</strong><br>
  Is it maybe the order of the js loading? </p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;!--[if lt IE 8]&gt;
       &lt;script src="files/js/json3.min.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  &lt;script src="files/js/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="files/js/ui-bootstrap-tpls-0.1.0-SNAPSHOT.js"&gt;&lt;/script&gt;
  &lt;script src="files/js/angular-ui.js"&gt;&lt;/script&gt;
  &lt;script src="files/js/angular-resource.min.js"&gt;&lt;/script&gt;
  &lt;script src="files/js/controller.js"&gt;&lt;/script&gt;
  &lt;script src="files/js/select2.js"&gt;&lt;/script&gt;
  &lt;script src="files/js/main.js"&gt;&lt;/script&gt;  
  </code></pre>
  
  <p><strong>EDIT 3:</strong><br>
  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?  </p>
  
  <pre><code>&lt;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"&gt;
  &lt;/a&gt;&lt;/div&gt;  
  </code></pre>
  
  <p><strong>EDIT 4:</strong><br>
  Edit 3 is also solved with this help here:<br>
  <a href="https://groups.google.com/d/msg/angular/0zHsVuUryKI/ckTvY93NcRsJ" rel="noreferrer">https://groups.google.com/d/msg/angular/0zHsVuUryKI/ckTvY93NcRsJ</a>  </p>
  
  <p>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.  </p>
  
  <p>EDIT 5:<br>
  That is strange. I managed to load the first template right. All brackets {{}} are loading properly.<br>
  <strong>I added .resolve to my Ctrl:</strong>  </p>
  
  <pre><code>// 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;
      }
  };
  </code></pre>
  
  <p>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.  </p>
  
  <p><strong>Routes:</strong>  </p>
  
  <pre><code>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'
      });
  }]);  
  </code></pre>
  
  <p>Does anyone has a clue, what or where the mistake may be?  </p>