过去几周我从头开始构建我的应用程序。 我在执行说明时做到了 here .
我不得不说，一切都适用于任何普通浏览器，例如 Mozilla 或 Chrome，Angular.js 框架对我来说非常有用。
问题是在 IE8 中，一切似乎都被破坏了，而且 document.createElement 当我尝试为我的 custome 指令创建一个元素时，DOM 对象抛出一个错误(我也使用了 'x-' 前缀，这是 btowser 的这个蹩脚借口所要求的)。
截图:
应用索引:
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" xmlns:x-restrict="" xmlns:x-fileupload="" class="ng-app" ng-app="myApp" ng-controller="homeCtrl">
<link rel="stylesheet" type="text/css" href="css/foundation.css">
<link rel="stylesheet" type="text/css" href="css/form.css">
<link rel="stylesheet" type="text/css" href="css/meta.css">
<!--[if lte IE 8]>
<script src="js/json3.min.js"></script>
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
document.createElement('x-restrict');
document.createElement('x-fileupload');
// Optionally these for CSS
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');
</script>
<![endif]-->
<title>{{model.title}}</title>
</head>
<body>
<div class="errorBar" ng-show="model.error.visible"><div class="errorBarContent">{{model.error.message}}</div></div>
<div ng-include src="layout.menuSrc"></div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<ng-view></ng-view>
</div>
<div class="col2">
<div ng-include src="layout.leftSideBarSrc"></div>
</div>
<div class="col3">
<div ng-include src="layout.rightSideBarSrc"></div>
</div>
</div>
</div>
</div>
<!--<div id="mainFrame">
</div> -->
<div ng-include src="layout.footerSrc" id="footer"></div>
</div>
<!-- TODO: REMOVE THE CDN JQUERY AND REPLACE IT WITH ONE THAT IS LOCATED WITHIN THE PROJECT -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="lib/bluimp/js/vendor/jquery.ui.widget.js"></script>
<script src="lib/bluimp/js/jquery.iframe-transport.js"></script>
<script src="lib/bluimp/js/jquery.fileupload.js"></script>
</script>
</body>
</html>
指令:
angular.module('myApp.directives', []).
directive('x-restrict', function(authService){
return{
restrict: 'A',
prioriry: 100000,
scope: false,
link: function(){
// alert('ergo sum!');
},
compile: function(element, attr, linker){
var accessDenied = true;
var user = authService.getUser();
var attributes = attr.access.split(" ");
for(var i in attributes){
if(user.role == attributes[i]){
accessDenied = false;
}
}
if(accessDenied){
element.children().remove();
element.remove();
}
}
}
});
最佳答案
你应该阅读这个article about using Angular with IE8 and earlier .您需要了解一些技巧。每当我将 Angular 定位到 IE8 时，我都会避免编写元素指令，而是坚持使用属性指令。
关于javascript - Angular 在 IE 8 中不起作用，无法为我的指令创建自定义元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18593411/