与Angularjs CSS3Pie - CSS3Pie的影响正在使用NG-重复指令时，只适用于第一个元素 [英] CSS3Pie with Angularjs - The effects of CSS3Pie are applied only to first element when using ng-repeat directive
问题描述
我们的Web应用程序是建立与Angularjs。我有在我建立一个表使用NG重复指令几行HTML页面。各行包含一个按钮。按钮有圆角和渐变色。
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.
我们要支持IE8因此，我决定利用CSS3Pie，以达到相同的外观和放大器;觉得在现代浏览器。我使用的是HTC文件（而不是js版），一切都进行得很顺利，直到我得到的NG-重复这一问题。根据需要仅在第一行中的按钮显示，所以其他人保持旧平方风格没有梯度。下面是对截图的链接：表列的按钮
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
当我在IE开发者工具检查，我发现下面的源$ C $ C的第一行中的按钮：
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>
有关第二排，由CSS3Pie产生的code的部分缺失，因为你可以在以下块。参见：
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.
我想过使用CSS3Pie的JavaScript版本，但在这之前，我想肯定是没有可能实现我的目标与CSS3Pie的HTC版。
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.
推荐答案
近日，笔者碰到了类似的问题。我们的应用程序使用PIE实现圆角和IE8阴影效果。当我通过NG重复生成HTML的圆角/阴影效果消失在IE8。
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.
一些测试后，我意识到，这是因为当元素被附加到PIE的NG-重复尚未呈现。让我感动的PIE附加code到页的末尾：
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.
这篇关于与Angularjs CSS3Pie - CSS3Pie的影响正在使用NG-重复指令时，只适用于第一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![表列的按钮](\"http://i.stack.imgur.com/OukSd.png\"){kind=link}