0

我的指令在 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 中发生的情况是......示例可能之前的 max:100 和 current:100 然后灰色条的宽度为 100px，彩色条的宽度为 100px。彩色条的颜色将为绿色，因为 current 等于 max... 然后我将 scope.changeability 更新为 max: 130 和 current:90 所以我应该期望灰色条的宽度为 130px 并且彩色条的宽度应为 90 像素，但宽度不会更新。颜色是正确的。问题是宽度，因为它没有更新。

我还添加了 polyfill

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

1 回答 1

0

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

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

你可以在这里看到一些关于所有这些的例子https://skydrive.live.com/redir?resid=949DC4EDBFFD4738!189&authkey=!ABZCTBTTOCDYGhk

于 2013-10-27T05:33:59.140 回答