CSS3Pie with Angularjs - The effects of CSS3Pie are applied only to first element when using ng-repeat directive

问题

Our Web application is built with Angularjs. I have a HTML page in which I am building a table with several rows using the ng-repeat directive. Each row contains a button. Buttons have rounded corners and gradient color.

We have to support IE8 therefore I have decided to take advantage of CSS3Pie in order to achieve the same look&feel as in modern browsers. I am using the htc file (not the js version) and everything went well until I got that issue with the ng-repeat. Only the button in the first row is displayed as needed, the others keep the old square style without the gradient. Here is a link towards the screenshot: Table column with buttons

When I checked in IE Developer Tools, I found the following source code for the button in the first row :

<CSS3-CONTAINER style="Z-INDEX: auto; POSITION: absolute; DIRECTION: ltr; TOP: 46px; LEFT: 1125px">
   <BACKGROUND style="POSITION: absolute; TOP: 0px; LEFT: 0px">
   <GROUP2>
   <css3vml:shape style="POSITION: absolute; WIDTH: 36px; HEIGHT: 22px; TOP: 0px; BEHAVIOR: url(#default#VML); LEFT: 0px" coordsize = "1000,1000">
      <css3vml:fill></css3vml:fill>
      <css3vml:fill></css3vml:fill>
   </css3vml:shape>
   </GROUP2>
   </BACKGROUND>
   <BORDER style="POSITION: absolute; TOP: 0px; LEFT: 0px">
      <css3vml:shape style="POSITION: absolute; WIDTH: 36px; HEIGHT: 22px; TOP: 0px; BEHAVIOR: url(#default#VML); LEFT: 0px" coordsize = "1000,1000">
         <css3vml:stroke></css3vml:stroke>
         <css3vml:stroke></css3vml:stroke>
      </css3vml:shape>
   </BORDER>
</CSS3-CONTAINER>
<css3-container style="Z-INDEX: auto; POSITION: absolute; DIRECTION: ltr; TOP: 46px; LEFT: 1119px" jQuery1110014396690653581418="155" href="#/admin/competences/edit/385">
   <background style="POSITION: absolute; TOP: 0px; LEFT: 0px">
      <group2>
         <?xml:namespace prefix = css3vml ns = "urn:schemas-microsoft-com:vml" />
         <css3vml:shape style="POSITION: absolute; WIDTH: 36px; HEIGHT: 22px; TOP: 0px; BEHAVIOR: url(#default#VML); LEFT: 0px" coordsize = "72,44" coordorigin = "1,1" fillcolor = "#660" stroked = "f" path = " m0,6 qy6,0 l66,0 qx72,6 l72,38 qy66,44 l6,44 qx0,38 x e">
            <css3vml:fill></css3vml:fill>
            <css3vml:fill></css3vml:fill>
         </css3vml:shape>
      </group2>
   </background>
   <border style="POSITION: absolute; TOP: 0px; LEFT: 0px">
      <css3vml:shape style="POSITION: absolute; WIDTH: 36px; HEIGHT: 22px; TOP: 0px; BEHAVIOR: url(#default#VML); LEFT: 0px" coordsize = "72,44" coordorigin = "1,1" filled = "f" stroked = "t" strokecolor = "#616100" strokeweight = ".75pt" path = " m1,6 qy6,1 l66,1 qx71,6 l71,38 qy66,43 l6,43 qx1,38 x e">
         <css3vml:stroke></css3vml:stroke>
         <css3vml:stroke></css3vml:stroke>
      </css3vml:shape>
   </border>
</css3-container>
<BUTTON class="btn btn-primary btn-xs pie_first-child " type=submit data-ui-sref="admin.competences.edit({competenceId:competence.id})" _pieId="_52">edit</BUTTON>

For the second row, a part of the code generated by CSS3Pie is missing , as you can see in the following block:

<CSS3-CONTAINER style="Z-INDEX: auto; POSITION: absolute; DIRECTION: ltr; TOP: 46px; LEFT: 1125px">
   <BACKGROUND style="POSITION: absolute; TOP: 0px; LEFT: 0px">
      <GROUP2>
         <css3vml:shape style="POSITION: absolute; WIDTH: 36px; HEIGHT: 22px; TOP: 0px; BEHAVIOR: url(#default#VML); LEFT: 0px" coordsize = "1000,1000">
            <css3vml:fill></css3vml:fill>
            <css3vml:fill></css3vml:fill>
         </css3vml:shape>
      </GROUP2>
   </BACKGROUND>
   <BORDER style="POSITION: absolute; TOP: 0px; LEFT: 0px">
      <css3vml:shape style="POSITION: absolute; WIDTH: 36px; HEIGHT: 22px; TOP: 0px; BEHAVIOR: url(#default#VML); LEFT: 0px" coordsize = "1000,1000">
         <css3vml:stroke></css3vml:stroke>
         <css3vml:stroke></css3vml:stroke>
      </css3vml:shape>
   </BORDER>
</CSS3-CONTAINER>
<BUTTON class="btn btn-primary btn-xs pie_first-child" type=submit data-ui-sref="admin.competences.edit({competenceId:competence.id})" jQuery1110014396690653581418="163" _pieId="_52" href="#/admin/competences/edit/907">edit</BUTTON>

I would like to know if there is a solution to make that work as required.

I thought about using the javascript version of CSS3Pie but before that, I would like to be sure that there is no possibility to achieve my goal with the htc version of CSS3Pie.

回答1:

Recently, I ran into the similar problem. Our app uses PIE to achieve round-corner and shadow effect in IE8. When I generate HTML through ng-repeat, the round-corner/shadow effect is gone in IE8.

After some test, I realized that this is because when the elements are being attached to PIE, the ng-repeat has not been rendered yet. So I moved the PIE attach code to the end of the page:

if (window.PIE) {

    jQuery(function () {
        jQuery('round-corner').each(function () {
            PIE.attach(this);
        });
    });

then everything works fine. Hope this helps.

来源：https://stackoverflow.com/questions/23012925/css3pie-with-angularjs-the-effects-of-css3pie-are-applied-only-to-first-elemen

标签

angularjs

internet-explorer-8

css3pie