javascript Angular 在 IE 8 中不起作用,无法为我的指令创建自定义元素

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18593411/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 12:30:57  来源:igfitidea点击:

Angular doesn't work in IE 8, can't create a custom element for my directives

javascriptangularjsinternet-explorer-8angularjs-directive

提问by Oleg Belousov

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.

我不得不说,在任何普通浏览器(如 Mozilla 或 Chrome)上一切都很好,Angular.js 框架对我很有用。

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

问题是,在 IE8 中,一切似乎都被破坏了,当我尝试为我的客户指令创建一个元素时,document.createElement DOM 对象会抛出一个错误(我也使用了“x-”前缀,因为btowser 的这个蹩脚的借口所要求的)。

A screen shot: Errros from the explorer development console

屏幕截图: 资源管理器开发控制台中的错误

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();           
            }

        }
    }
});

回答by Brian Genisio

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.

您应该阅读这篇关于在 IE8 及更早版本中使用 Angular 的文章。有一些技巧你需要知道。每当我使用 Angular 定位 IE8 时,我都会避免编写元素指令,而是坚持使用属性指令。