比较来自世界各地的卖家的域名和 IT 服务价格

AngularJS ng-href 和 svg xlink

我想要一些关于使用命名空间属性的信息 xml 从 angular.

问题是 angular 附带一对用于处理录制属性的指令,例如 href 和 src, 什么时候 angular 分析 expressions /否则,浏览器将尝试下载
{{mymodel.myimage}}

作为 url/

https://github.com/angular/ang ... 3L329
我遇到的问题是我使用 angular 对于产出 svg 和...一起 D3, 和以来 angular 没有输出方式
xlink:href

, 我被困了。

我创建了一个显示的自定义指令 xlink:href


app.directive/'ngXlinkHref', function // {
return {
priority: 99,
restrict: 'A',
link: function /scope, element, attr/ {
var attrName = 'xlink:href';
attr.$observe/'ngXlinkHref', function /value/ {
if /!value/
return;

attr.$set/attrName, value/;
}/;
}
};
}/;


完整的演示版本:
http://plnkr.co/edit/cMhGRh
但似乎如果我不手动添加 xlink:href 到项目,然后是图像 svg 将不会显示。

关于如何最好地处理名称空间的任何建议 xml / svg 和...一起 angular, 会非常感激。
已邀请:

喜特乐

赞同来自:

您可以使用
ng-attr-<some attribute="">



ng-attr-xlink:href="{{xxx}}"

适用于我。

请注意,您还需要空值。
xlink:href=""

作为初始价值。 – Derek Hsu。
</some>

小姐请别说爱

赞同来自:

如果像我一样,你正在寻找一种添加图像的方法 svg, 您可以通过添加:


xlink:href="" ng-href="{{ foo }}"


例子:

http://jsbin.com/sigoleya/1/edit?html,js,output
我找到解决方案的地方:

https://github.com/angular/angular.js/issues/7697

诸葛浮云

赞同来自:

试图输出时,我遇到了类似的问题
xlink:href

, 与模型绑定。 基于所选用户
<option>

在控制元件中
<select>

, 我试图展示动态图标 SVG 通过属性
xlink:href

元素
<use>

.

我发现
https://github.com/angular/angular.js/issues/7697
在释放中 GitHub 为了 AngularJS. 基于那里的讨论,似乎,由于有一个可行的旁路路径,它们有效地呈现了校正,将其移动到未实现工作的阶段。

最终为我而努力的灵感来自 JSBin:

http://jsbin.com/sigoleya/1/edit?html,js,output
这是我在模板中使用的代码:


<svg class="icon" data-ng-class="category.iconName">
<use data-ng-href="{{'#' + category.iconName}}" xlink:href="">
</use></svg>


例如 , 如果设置值
category.iconName


icon-music

, 那 Angular 动态设置值
xlink:href

价值
#icon-music

, 这是指元素
<svg id="icon-music">

接下来在同一页面上。

作为其他,关键点设置为安装空属性。
xlink:href=""

对于您调用指令的元素
ngHref

. 显然,属性的顺序并不重要。 使用
ng-attr-xlink:href="{{xxx}}"

/正如德里克·香港卫生的答案所提到的那样/ 不适合我。

所有这些都表明了 Angular 1.3.36.
</svg></use></select></option>

窦买办

赞同来自:

我解决了与以下模块相同的问题:

模块 SVGs:


var app = angular.module/'Svgs', []/;

angular.forEach/[
{ ngAttrName: 'ngXlinkHref', attrName: 'xlink:href' },
{ ngAttrName: 'ngWidth', attrName: 'width' },
{ ngAttrName: 'ngHeight', attrName: 'height' }
], function /pair/ {

var ngAttrName = pair.ngAttrName;
var attrName = pair.attrName;

app.directive/ngAttrName, function /IeHelperSrv/ {

return {

priority: 99,

link: function /scope, element, attrs/ {

attrs.$observe/ngAttrName, function /value/ {

if /!value/ return;

attrs.$set/attrName, value/;
if /IeHelperSrv.isIE/ element.prop/attrName, value/;
}/;
}
};
}/;
}/;


检测模块 IE:


angular.module/'IeHelper', []/.factory/'IeHelperSrv', function // {

return {
isIE: checkForIE.isIE,
}
}/;

var checkForIE = {
init: function // {
this.isIE = /navigator.userAgent.indexOf/'MSIE'/ != -1/;
}
};

checkForIE.init//;


HTML:


 image has initial fake source, width and height to force it to render 
<image height="1" ng-cloak="" ng-height="{{item.height}}" ng-width="{{item.width}}" ng-xlink-href="{{item.imageSrc}}" width="1" xlink:href="~/Content/Empty.png"/>

郭文康

赞同来自:

对于由于用户界面路由器而仍然存在此问题的人 Angular/Angular 在模式 HTML5, 我想出了一个简单的修复,允许图标 svg sprite 与他们的属性一起工作 xlink:href 我们的意思是。

这里的精华:
https://gist.github.com/planet ... bd4a3

app.run/['$rootScope', '$window', function/$rootScope, $window/{
$rootScope.$on/'$locationChangeSuccess', function/event/{
$rootScope.absurl = $window.location.href;
}/;

<svg><use xlink:href="{{absurl+'#svgvID'}}"></use></svg>

二哥

赞同来自:

我使用时遇到了这个问题 Ajax 下载精灵表 svg 到页面。 如果我有 a 在加载Sprite列表之前的页面上,他将失败,并且在Sprite列表可用后将无法解决。 全部添加B. dom 装载表后,精灵均按顺序。 我不得不推迟incless的位置 dom 只要精灵列表完成下载。

它只感动了 IOS. 所有其他浏览器都不关心订单。

詹大官人

赞同来自:

我花了更多时间而不是我想要的时间。 靠近 20-30 分钟。

如果我理解正确,任何不成功的图像元素加载

将来会使这个元素无用

. 我认为这是类似的东西 @GeekyMonkey 他说。 如果是绑定系统 angular 最初安装了 xlink:href 在 null, 即使我们在未来有效值,图像元素也将不再工作。

这是解决方案,请注意我如何将图像元素包装在元素内 g, 使用指令 ng-if. 这确保我们才能在正确的值可用时与图像通信。


<g ng-if="vm.svgMap.background != null">
<image height="1" ng-attr-height="{{vm.svgMap.background.width}}" ng-attr-width="{{vm.svgMap.background.width}}" ng-attr-xlink:href="{{vm.svgMap.background.image | trusted}}" width="1" x="0" xlink:href="" y="0"/>
</g>


正如其他人所说,属性顺序也很重要。 确保这一点 angularJS 允许我们绑定图像元素,我们还需要相信这个资源,我通过过滤器完成了 /它在属性中 xlink:href/:


/function// {
'use strict';

angular.module/'myTool'/.filter/'trusted', TrustedFilter/;

function TrustedFilter/$sce/ {
return function/url/ {
return $sce.trustAsResourceUrl/url/;
};
};
}///;

要回复问题请先登录注册