javascript AngularJS 和 Internet Explorer
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14464742/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS and Internet Explorer
提问by Marek123
I have problems getting my app loading on Internet Explorer 7 & 8 and even 9.
我在 Internet Explorer 7 和 8 甚至 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 标记中：
<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
我从 AngularUI 框架中添加了 ieshiv.js。
我加了
<!--[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.
它根本不起作用。未加载任何变量，未呈现列表且网站无法运行。
Chrome、FF 和 Opera 运行良好。
Do you have any hints where to start ?
你对从哪里开始有任何提示吗？
EDIT 1:
Link to my controller.js on paste.bin
http://pastebin.com/z67qE9ME
编辑 1：
在 paste.bin http://pastebin.com/z67qE9ME上链接到我的 controller.js
EDIT 2:
Is it maybe the order of the js loading?
编辑 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>
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?
编辑 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>
EDIT 4:
Edit 3 is also solved with this help here:
https://groups.google.com/d/msg/angular/0zHsVuUryKI/ckTvY93NcRsJ
编辑 4：
编辑 3 也通过这里的帮助解决：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.
但是我现在遇到了另一个问题。在 IE 8 及以下版本中，路由模板不呈现。我只看到 {{}} 变量而不是更多。
EDIT 5:
That is strange. I managed to load the first template right. All brackets {{}} are loading properly.
I added .resolve to my Ctrl:
编辑 5：
这很奇怪。我设法正确加载了第一个模板。所有括号 {{}} 都正确加载。
我将 .resolve 添加到我的 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.
奇怪的是。从（正确呈现的）模板，我链接到第二个模板和路线（从经销商/:id 到 /dealermessage/:id），但这条路线（一切都一样，包括解析）没有正确加载，相同错误比以前，模板没有呈现。
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?
有没有人有线索，错误可能是什么或在哪里？
回答by Ven
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
Angular-UI 项目包含一个名为“IEShiv”的“子项目”，它应该让你在 IE 下流畅地运行 angular：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]-->
回答by Ketan
Whenever I got these type of errors in IE (specially 8) It was either one of these 2 issues.
每当我在 IE 中遇到这些类型的错误（特别是 8 个）时，都是这两个问题之一。
1) I was using a custom tag like <auto-complete>and was not using document.createElement
1）我使用的是自定义标签<auto-complete>，但没有使用document.createElement
2) I had elements with duplicate idattributes. IE does not like this.
2）我有具有重复id属性的元素。IE 不喜欢这个。
Method of elimination normally works for me to isolate the problem in the template.
消除方法通常对我有用以隔离模板中的问题。
