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, 会非常感激。
2021-03-20 添加评论
分享

没有找到相关结果

    已邀请:

    喜特乐

    赞同来自:

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



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

    适用于我。

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

    作为初始价值。 – Derek Hsu。
    </some>
    2021-03-21 0 0
    分享

    小姐请别说爱

    赞同来自:

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


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


    例子：

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

    https://github.com/angular/angular.js/issues/7697
    2021-03-21 0 0
    分享

    诸葛浮云

    赞同来自:

    试图输出时，我遇到了类似的问题
    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>
    2021-03-21 0 0
    分享

    窦买办

    赞同来自:

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

    模块 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"/>
    2021-03-21 0 0
    分享

    郭文康

    赞同来自:

    对于由于用户界面路由器而仍然存在此问题的人 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>
    2021-03-21 0 0
    分享

    二哥

    赞同来自:

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

    它只感动了 IOS. 所有其他浏览器都不关心订单。
    2021-03-21 0 0
    分享

    詹大官人

    赞同来自:

    我花了更多时间而不是我想要的时间。 靠近 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/;
    
 };
    
 };
    
}///;
    2021-03-21 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    Copyright © 2023, All Rights Reserved