AngularJS和Internet Explorer

9

我在Internet Explorer 7、8甚至9上无法加载我的应用程序。

我收到以下错误信息(控制台):

Uncaught TypeError: Cannot read property 'nodeName' of undefined   

加载时,{{}}变量正在加载并消失。未呈现任何内容。
我将其添加到HTML标记中:

<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;">  

我从AngularUI框架中添加了ieshiv.js。
我添加了

<!--[if lt IE 8]>
     <script src="files/js/json3.min.js"></script>
<![endif]-->  

问题:只添加到头部部分是否足够,还是必须修改我的代码?

我还将这个添加到了我的头部部分:

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

而且它完全不起作用。没有加载任何变量,没有渲染列表,网站也无法工作。
Chrome、FF和Opera都可以正常工作。
你有什么提示从哪里开始吗?
编辑1:
链接到我的controller.js在paste.bin上
http://pastebin.com/z67qE9ME
编辑2:
是不是js的加载顺序有问题?
<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>  

编辑3:
好的,我在我的脚本中添加了fauxconsole.js并清理了代码,它可以正常工作。至少它正在正确加载(没有任何css修正)。但是它无法加载部分标签的内联样式。你有什么想法为什么会这样吗?

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

编辑4:
此处提供的帮助也解决了编辑3:
https://groups.google.com/d/msg/angular/0zHsVuUryKI/ckTvY93NcRsJ

但是我现在遇到了另一个问题。在IE 8及以下版本中,路由模板无法渲染。我只能看到{{}}变量,什么都没有了。

编辑5:
这很奇怪。我成功地加载了第一个模板。所有的括号 {{}} 都被正确加载了。
我向我的Ctrl中添加了.resolve:

// 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;
    }
};

奇怪的是,从(正确渲染的)模板中,我链接到第二个模板和路由(从dealer /:id到/ dealermessage /:id),但是这个路由(包括解决方案在内)没有正确加载,与之前相同的错误,模板没有被渲染。
路由:
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'
    });
}]);  

有人知道错误出在哪里吗?可能是什么问题?


在jsfiddle上发布一些代码是开始的好方法。 - Patrick
好的,我将fauxconsole.js添加到我的脚本中并清理了代码,它可以工作了。至少它正在正确加载(没有任何CSS修正)。但是它无法在某些标记上加载内联样式。你有什么想法为什么会这样吗? - Marek123
无效的HTML标记可能是问题所在。请查看这里的答案 - cebru
2
我可以建议您将这个问题缩小范围(或者创建一个新的问题?),以便更好地解决当前剩余的问题吗? - Roy Truelove
+1 @RoyTruelove,有很多不相关的问题,这使得无法给出答案。 - Umur Kontacı
显示剩余3条评论
2个回答

2

0
每当我在IE(特别是8)中遇到这些类型的错误时,通常是以下两个问题之一:
1)我正在使用自定义标签,例如,但没有使用document.createElement。
2)我有具有重复id属性的元素。 IE不喜欢这样做。
通常通过排除法来隔离模板中的问题对我很有效。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接