Angular 在 IE 8 中不起作用，无法为我的指令创建自定义元素 [英] Angular doesn't work in IE 8, can't create a custom element for my directives
问题描述
过去几周我从头开始构建我的应用程序.我是在执行.有一些技巧你需要知道.每当我使用 Angular 定位 IE8 时，我都会避免编写元素指令，而是坚持使用属性指令.
I built my application from scratch for the past few weeks. I did it while implementing the instructions here.
I have to say that everything works great with any normal browser such as Mozilla or Chrome, and the Angular.js framework has been of much use to me.
The problem is that with IE8, everything seems to be broken, and the document.createElement DOM object throws an errro when I try to create an element for my custome directive(which I'm also using an 'x-' prefix for, as required by this lame excuse of a btowser).
A screen shot:
app index:
<!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>
Directive:
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();
}
}
}
});
You should read this article about using Angular with IE8 and earlier. There are some tricks you need to know about. Whenever I target IE8 with Angular, I avoid writing element directives and stick with attribute directives instead.
这篇关于Angular 在 IE 8 中不起作用，无法为我的指令创建自定义元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
