CODEWITHSUNDEEP
angularjsangularjs-directiveangular-uiangular-ui-bootstrap
Logan W
Logan W

Reputation: 1377

angular-ui IE8 accordion

Using the Angular-UI bootstrap accordion in IE8 the tabs do not expand. Here is the error I am receiving using IE 8's F12

 Error: Unexpected call to method or property access.undefined 
 Error: No controller: accordion<div class="accordion-group ng-scope" ng-repeat="c in categories" heading="{{c.Name}}"> 
 Error: No controller: accordion<div class="accordion-group ng-scope" ng-repeat="c in categories" heading="{{c.Name}}"> 
 Error: No controller: accordion<div class="accordion-group ng-scope" ng-repeat="c in categories" heading="{{c.Name}}"> 
 Error: No controller: accordion<div class="accordion-group ng-scope" ng-repeat="c in categories" heading="{{c.Name}}"> 
 Error: No controller: accordion<div class="accordion-group ng-scope" ng-repeat="c in categories" heading="{{c.Name}}"> 
 Error: No controller: accordion<div class="accordion-group ng-scope" ng-repeat="c in categories" heading="{{c.Name}}"> 
 Error: No controller: accordion<div class="accordion-group ng-scope" ng-repeat="c in categories" heading="{{c.Name}}"> 
 Error: No controller: accordion<div class="accordion-group ng-scope" ng-repeat="c in categories" heading="{{c.Name}}">

Has anyone had a similar issue and been able to resolve it?

Upvotes: 6

Views: 4897

Answers (3)

Fritz
Fritz

Reputation: 10055

IE8 won't recognize custom elements. If you need to use the accordion directive as an element instead of an attribute, you'll have to define the element so IE won't complain. This simple script will do the trick.

<script type="text/javascript">
    document.createElement('accordion');
    document.createElement('accordion-group');
    document.createElement('accordion-heading');
</script>

Otherwise, just use the directive in its attribute form.

Upvotes: 4

Matt Byrne
Matt Byrne

Reputation: 5147

Another gotchya that I just encountered is that you can't put the ng-controller on the same element as <div accordion> in ie8. Took me a lot of trail-and-error to figure that out.

I had to replace

<div accordion ng-controller="MyCtrl">
    ...
</div>

with

<div ng-controller="MyCtrl">
    <div accordion>
        ...
    </div>
</div>

Upvotes: 1

Logan W
Logan W

Reputation: 1377

Looks like the main issue was IE not liking <accordion> used <div accordion></div> instead

Upvotes: 6

Related Questions