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

问题

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

        }
    }
});

回答1:

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.

来源：https://stackoverflow.com/questions/18593411/angular-doesnt-work-in-ie-8-cant-create-a-custom-element-for-my-directives

标签

javascript

angularjs

internet-explorer-8

angularjs-directive