javascript - IE11 使用 ng-attr-data 为对象添加斜 Angular 边框

Question

我遇到了对象问题，这是由于使用 Angular.js 使用 ng-attr-data 填充对象的数据 url 引起的。我的对象是 svgs(动画所必需的，并且在 IE 中运行良好，直到更改为 angular.js)。

Internet Explorer 正在使用类似 iFrame 的斜 Angular 框呈现内容，因为它最初在文档加载时找不到数据属性，并且仅在 Angular 更改/添加属性时才找到。如果数据 url 是硬编码的，它可以正常工作并且不会在其周围放置边框。

我试过设置border-style, border-width, outline, frameborder 属性, border 属性 - 但没有任何作用。

我试图在对象标签上使用 ng-if 来阻止它们被渲染，但它的行为仍然相同(我假设是因为它在文档中并且实际上并没有被排除在处理之外)。

这是有问题的元素标记:

<object ng-attr-data="{{url}}" id="svgobject" type="image/svg+xml" ></object>

演示问题的 Plunk:http://plnkr.co/edit/3vom2L8IRNEskSnKIrfm?p=preview

这可能是一个相关问题: Remove border from object element in IE11

Answer 1

我已经通过创建一个 Angular Directive(指令)将对象注入(inject)页面来解决我的问题——从而消除了在页面加载时没有设置 data=""属性的对象存在的情况。该指令用一个对象标签替换它所设置的 div，并传入 data-svgname 属性作为新对象的名称和 id 属性。

如果 chrome 没有在 SVG 中指定名称，那么在奇怪的情况下，它的缓存算法会出错，并随机将页面上的 SVG 替换为已缓存的其他 SVG。

myApp.directive('injectSvg', function ($compile) {
        //Usage: 
        // <div inject-svg data-url="{{'svgfile.svg'}}" data-svgname="mysvg" class="svg"></div>
        //Replaces with SVG graphic
        return {
            link: function ($scope, $element, $attrs) {
                var el = angular.element('<object data="' + $attrs.url + '" id="' + $attrs.svgname + '" name="' + $attrs.svgname + '" type="image/svg+xml" class="' + $attrs.class + '"></object>');
                $compile(el)($scope);
                $element.replaceWith(el);


            }
        }
    });