角并不在IE 8的工作，不能为我的指令自定义元素 [英] Angular doesn't work in IE 8, can't create a custom element for my directives

查看：118
本文介绍了角并不在IE 8的工作，不能为我的指令自定义元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我建立从零开始我的应用在过去的几个星期。
我做到了，同时实施的指示这里。

我必须说，一切与任何普通的浏览器，例如Mozilla或Chrome的伟大工程，并Angular.js框架已经多大用处的我。

问题是，与IE8，似乎一切都被打破，并通过document.createElement
当我尝试创建我的custome指令的元素（我还使用了X-preFIX为所要求的一个btowser这个蹩脚的借口）DOM对象抛出errro。

一个屏幕截图：

应用指数：

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML的xmlns：NG =htt​​p://angularjs.org的xmlns：X-限制=的xmlns：X-文件上传=级=NG-应用NG-应用=对myAppNG控制器= homeCtrl＆GT;
    ＆LT;链接rel =stylesheet属性类型=文/ CSS的href =CSS / foundation.css＆GT;
    ＆LT;链接rel =stylesheet属性类型=文/ CSS的href =CSS / form.css＆GT;
    ＆LT;链接rel =stylesheet属性类型=文/ CSS的href =CSS / meta.css＆GT;
    ＆LT;！ -  [如果LTE IE 8] GT;
          ＆LT;脚本SRC =JS / json3.min.js＆GT;＆LT; / SCRIPT＆GT;
        ＆LT;脚本＆GT;        使用document.createElement（'NG-包括'）;
        使用document.createElement（'NG-复数'）;
        使用document.createElement（'NG-视图'）;
        使用document.createElement（'X-限制'）;
        使用document.createElement（'X-文件上传'）;
        //您可以选择这些对CSS
        使用document.createElement（'NG：包括'）;
        使用document.createElement（'NG：复数'）;
        使用document.createElement（'NG：视图'）;
      ＆LT; / SCRIPT＆GT;
    百分比抑制率ENDIF]  -  GT！;
    ＆LT;标题＆GT; {{model.title}}＆LT; /标题＆GT;
  ＆LT; /头＆GT;
  ＆LT;身体GT;
  ＆LT; D​​IV CLASS =errorBarNG-秀=model.error.visible＆GT;＆LT; D​​IV CLASS =errorBarContent＆GT; {{model.error.message}}＆LT; / DIV＆GT;＆LT; / DIV＆GT;
  ＆LT; D​​IV NG-包括SRC =layout.menuSrc＆GT;＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =colmask threecol＆GT;
      ＆LT; D​​IV CLASS =colmid＆GT;
        ＆LT; D​​IV CLASS =colleft＆GT;
          ＆LT; D​​IV CLASS =COL1＆GT;
            ＆LT; NG-视图＆gt;＆LT; / NG-视图＆gt;
          ＆LT; / DIV＆GT;
          ＆LT; D​​IV CLASS =COL2＆GT;
            ＆LT; D​​IV NG-包括SRC =layout.leftSideBarSrc＆GT;＆LT; / DIV＆GT;
          ＆LT; / DIV＆GT;
          ＆LT; D​​IV CLASS =COL3＆GT;
            ＆LT; D​​IV NG-包括SRC =layout.rightSideBarSrc＆GT;＆LT; / DIV＆GT;
          ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
     ＆LT; / DIV＆GT;
＆LT;！ - ＆LT; D​​IV ID =mainFrame中＆GT;
      ＆LT; / DIV＆GT; - ＆GT;      ＆LT; D​​IV NG-包括SRC =layout.footerSrcID =页脚＆GT;＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT;  -  TODO：卸下CDN jQuery和替换它与一个位于内项目 - ＆GT;
    ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"></script>
    ＆所述; SCRIPT SRC =LIB /角度/ angular.js＆GT;＆下; /脚本＆GT;
    ＆所述; SCRIPT SRC =LIB /角度/角resource.js＆GT;＆下; /脚本＆GT;
        ＆LT;脚本SRC =JS / app.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =JS / services.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =JS / controllers.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =JS / filters.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =JS / directives.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =LIB / bluimp / JS /供应商/ jquery.ui.widget.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =LIB / bluimp / JS / jquery.iframe-transport.js＆GT;＆LT; / SCRIPT＆GT;
     ＆LT;脚本SRC =LIB / bluimp / JS / jquery.fileupload.js＆GT;＆LT; / SCRIPT＆GT;    ＆LT; / SCRIPT＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;

指令：

  angular.module（'myApp.directives'，[]）。
指令（X-限制'，函数（authService）{
    返回{
        限制：'A'，
        prioriry：100000，
        适用范围：假的，
        链接：功能（）{
            //警报（故我在！'）;
        }，
        编译：功能（元素，属性，连接器）{
            VAR存取遭拒= TRUE;
            变种用户= authService.getUser（）;
            变种属性= attr.access.split（）;
            为（在属性变种I）{
                如果（user.role属性== [I]）{
                    存取遭拒= FALSE;
                }
            }
            如果（存取遭拒）{
                element.children（）remove（）方法。
                element.remove（）;
            }        }
    }
}）;


解决方案

您应该阅读文章有关使用角与IE8和更早的版本。有一些你需要知道的技巧。每当我针对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.

这篇关于角并不在IE 8的工作，不能为我的指令自定义元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆