Question

我遇到了对象问题，这是因为使用Angular.js用ng-attr-data填充对象的数据网址。我的对象是svgs（动画所必需的，并且在IE中工作正常，直到更改为angular.js）。

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

我已尝试设置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指令将对象注入页面来解决我的问题 - 从而删除了一个对象存在的情况，在页面加载时没有设置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);


            }
        }
    });

Answer 2

碰到同样的问题。我不确定这是否是100％有效的处理方式，但到目前为止，我仍然看不到任何错误或任何错误（已在Chrome，FF，Safari，IE，Edge中检查过）。基本上只是添加了一个空的“数据”属性：

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

缺点是必须设置元素的大小，否则会发生一些奇怪的跳跃

Answer 3

我完全不明白，但如果你想删除任何html元素的边框？你有两个选择： 1-）您可以使用border-style，border-width，outline属性或 2-）你可以使用css在你的html元素上添加一个类，如下面的代码

<div ng-app="" class="borderless">
  Some content...
</div>

并按照代码

添加样式表文件

.borderless{
  Border:none;
  /*or border:0;*/
  outline:none;

}

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

3 个答案: