nested Angular views with IE8

Question

TLDR:

example: http://plnkr.co/edit/NeUWHh?p=preview

error at IE8 console: TypeError: 'childNodes' is null or not an objectundefined

seems very simple, works on any webkit browser and also on IE above 9, but breaks on IE8 and displaying the uc-compiled form of the inner view(with curly braces and field names).

My exact code, which is different from the sample code:

jobgrid.html:

<div class="jobContainer">  
    <div class="largeBlock">
        <div>
            <div class="access clicks">
                <a href="#/jobs/{{job.id}}"><h5 class="hasLabel" data-ng-bind="job.title"></h5></a>
                <span class="miniLabel" restrict access="admin recruiter"><a href="#/editJob/{{job.id}}">Edit</a></span>

            </div>
        </div>
        <div class="section" data-ng-bind="job.department.name">

        </div>
        <div class="section" data-ng-bind="job.locations[0].name">

        </div>
    </div>
    <div class="smallBlock">

        <div class="access" restrict access="recruiter admin">
            <div class="section enlarged">
                <a href="#/applicants?job={{job.id}}" data-ng-bind="job.job_stats.applicants_count.total"></a>
            </div>
            <div class="section">
                Applicants
            </div>
        </div>

        <div class="access" restrict access="scouter">
            <div class="section enlarged">
                <a href="#/applicants?job={{job.id}}" data-ng-bind="job.job_stats.applicants_count.referred"></a>
            </div>
            <div class="section">
                Applicants
            </div>
        </div>

    </div>
    <div class="smallBlock">
        <div class="access" restrict access="scouter recruiter admin">
            <div class="section enlarged">
                <a href="#/views/{{job.id}}">0</a>
            </div>
            <div class="section">
                Views
            </div>
        </div>
    </div>  
    <div class="smallBlock buttons">
        <!-- only if the company allows public distribution -->
        <div class="access" restrict access="scouter recruiter admin">
            <div class="section">
                <input type="button" class="tiny button" data-ng-click="layout.toggleShareSection(job.id)" value="Share">
            </div>
            <div class="section">
                <input type="button" class="tiny button" data-ng-click="layout.toggleReferSection(job.id)" value="Refer">
            </div>
        </div>  
    </div>
    <div class="largeBlock">
        <!-- only if the company allows public distribution -->
        <div class="section enlarged top" data-ng-bind="job.reward">

        </div>
        <div class="section enlarged date">
            <i class="foundation-star" data-ng-bind="job.modified | date:'d, MMM'"></i>
        </div>
    </div>
</div>
<hr>

dash.html:

<div class="metaContainer" data-ng-controller="dashCtrl" data-ng-cloak>
    <h1>{{model.title}}</h1>
    <div class="topbox">
        <div class="topboxSection">
        </div>
        <div class="topboxSection">
            <div class="topboxSubSectionLarge">
                <a class="small button">Share all jobs</a>
            </div>
            <div class="topboxSubSectionLarge">
                <a class="small button">Copy my job link</a>
            </div>
        </div>
    </div>
    <div class="topbox">
        <div class="topboxSection">
            <div class="topboxSubSectionLarge">
                <select data-ng-model="model.formData.location_id" data-ng-options="id as name for (id, name) in model.locationsList()">
                     <option value=''>Location</option>
                </select>
            </div>
            <div class="topboxSubSectionLarge">
                <div class="wideFieldContainer">
                    <select data-ng-options="id as name for (id, name) in model.departmentsList()" 
                    data-ng-model="model.formData.department_id">
                        <option value=''>Department</option>
                    </select>
                </div>
            </div>
            <div class="topboxSection">
            </div>
        </div>

        <div class="innerContainer">
                <hr>
                <div data-ng-repeat="job in model.myJobs()" data-ng-cloak>
                    <div data-ng-include src="'partials/jobgrid.html'"></div>
                </div>
        </div>
    </div>
</div>

Already did, I am using the ng-include directive as an attribute with data- prefix. And also have all the needed polyfils done in my index.html — Oleg Belousov
– Oleg Belousov, Commented Sep 15, 2013 at 15:50
Because I am not seeing that in the plunker that's why I asked. — zs2020
– zs2020, Commented Sep 15, 2013 at 15:56
If you are using the ng directives as attributes, with data- prefix and targeting IE8, you should theatrically have no problem, which is part of the reason why this is so frustrating — Oleg Belousov
– Oleg Belousov, Commented Sep 15, 2013 at 16:00
Make sure you have document.createElement('ng-view'); defined. You need to pre create all directives elements like this. Try it please. — zs2020
– zs2020, Commented Sep 15, 2013 at 16:02

Krishan · Accepted Answer · 2014-03-02 13:58:05Z

1

Can you update your script file also..

Use this

<html xmlns:ng="http://angularjs.org">
    <head>
      <!--[if lte IE 7]>
        <script src="/path/to/json2.js"></script>
      <![endif]-->
    </head>
    <body>
      ...
    </body>
  </html>

IE 8 Fix

if you use $http.delete api call replace it $http["delete"]

answered Mar 2, 2014 at 13:58

Krishan

2,4976 gold badges37 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

nested Angular views with IE8

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related