CODEWITHSUNDEEP
angularjsinternet-explorer-8angularjs-directive
Clint Powell
Clint Powell

Reputation: 2398

AngularJS in IE8 - Error: this command is not supported

I'm working on a SPA with Angular and the app requires IE8+ support. I recently pulled a search feature out into a directive. The git commit before I added the directive works fine, so I'm certain the error was caused by the directive. Here's the directive code:

myApp.directive('genericSearch', function() {
    return {
        restrict : 'A',
        replace: true,
        scope : {
            interface: '=genericSearch'
        },
        controller: 'genericSearchController',
        template : '<input class="generic-search" placeholder="Search" data-ng-model="model.searchText" data-ng-change="beginSearch()" />',
        link : function(scope, element, attrs) {
            scope.model = scope.interface.model || function() { };
            scope.finished = scope.interface.finished || function() { };
            scope.endpoint = scope.interface.endpoint || 'searchDirectory';
        }
    };
});

In my view template, the directive is initiated thus:

<input data-generic-search="searchInterface" />

Now when I navigate to a page with this directive, I get an error referencing the ng-view element: Error: This command is not supported.<:section class="is-scrollable ng-scope" data-ng-view="" ng-1400945355054="29">

Any idea where this error is coming from? I've tried the HTML5 boilerplates, adding the unsupported elements, like section, but it was working before I added the directive so I don't think that's the issue.

EDIT

The directive is confirmed working in IE9+ and Chrome. I'm guessing it's related to the input element. I've tried changing the original element to a div, which gets replaced by the input element in the directive template. No dice.

Upvotes: 1

Views: 646

Answers (1)

Clint Powell
Clint Powell

Reputation: 2398

The issue was indeed the input element, and changing it to span did the trick. Perhaps the page was cached when I tried before with div.

I think the issue is caused by the way IE handles input type changing and the way Angular replaces source elements for directives.

Upvotes: 1

Related Questions