Question

我的指令在chrome中完美运行，但在IE8中却没有：

app.directive('barMax', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            current: '=',
            max: '='
        },
        link: function postLink(scope, element, attrs) {
            scope.$watch('max', function (newValue) {
                var newContent = '';
                newContent += '<div class="bottom" style="width:{{max*2}}px;">&nbsp;</div><div class="mid" ng-class="{greater: current >= max, less: current < max}" style="width:{{current*2}}px;">&nbsp;</div><div class="top" style="height:17px;"><div style="width:41%;float:left;margin-top:2px;margin-left:2px;"></div><div style="float:left;width:50%;margin-top:2px;"></div></div>';
                element.append($compile(newContent)(scope));
            });
        }
    };
});

IE中发生的情况是......示例可能是前一个最大值：100和当前值：100然后灰色条的宽度为100px，彩色条的宽度为100px。彩色条的颜色为绿色，因为电流等于最大值...然后我将scope.changeability更新为max：130和current：90所以我应该期望灰色条的宽度为130px并且彩色条的宽度应为90px，但宽度不会更新。颜色是正确的。问题是宽度，因为它没有更新。

我还添加了polyfill

<!--[if lte IE 8]>
    <script>
        document.createElement('bar-max');
    </script>
<![endif]-->

Answer 1

IE不允许使用不熟悉的标签，因此您不能将指令用作标签。您必须使用限制“A”并将其用作已知html标记中的属性。如果你不想要包装器标签使用replace：true就像这样

return {
        restrict: 'A',
        replace:true,
        scope: ...,
        link:...

您可以在此处查看有关https://skydrive.live.com/redir?resid=949DC4EDBFFD4738!189&authkey=!ABZCTBTTOCDYGhk

所有内容的示例

指令中的宽度在IE中没有变化

1 个答案: