AngularJS - 将HTML元素添加到dom中，不含jQuery指令

我有一个AngularJS指令，我想在其中添加一个svg标签到指令的当前元素。现在我在jQuery的帮助下做到这一点AngularJS - 将HTML元素添加到dom中，不含jQuery指令

link: function (scope, iElement, iAttrs) { 

    var svgTag = $('<svg width="600" height="100" class="svg"></svg>'); 
    $(svgTag).appendTo(iElement[0]); 

    ... 
    }

但我不希望该指令依赖于jQuery这个简单的任务。我如何完成AngularJS的手段（或原生JavaScript代码）。

来源

2013-10-21 dorjeduck

为什么不尝试简单（但功能强大）html()方法：

iElement.html('<svg width="600" height="100" class="svg"></svg>');

或者append作为一种替代方案：

iElement.append('<svg width="600" height="100" class="svg"></svg>');

而且当然，更清洁的方式：

var svg = angular.element('<svg width="600" height="100" class="svg"></svg>'); 
iElement.append(svg);

小提琴：http://jsfiddle.net/cherniv/AgGwK/

来源

2013-10-21 07:56:10 Cherniv

谢谢你做的伎俩 - 新的angularjs ...再次感谢 – dorjeduck

@dorjeduck你欢迎，看看jsFiddle链接，我附上 – Cherniv

但它不是追加角度控制 –

你可以使用类似这样

var el = document.createElement("svg"); 
el.style.width="600px"; 
el.style.height="100px"; 
.... 
iElement[0].appendChild(el)

来源

2013-10-21 07:50:19 Pavel

谢谢帕维尔的答案。我试过这个，但我得到的是“”在dom中没有宽度，高度属性（在谷歌浏览器中） – dorjeduck

您需要Element.style.width – Kayo

谢谢Kayo。我刚刚尝试过el.style.width = 600;但仍然没有成功，猜我误解了你的答案 – dorjeduck

在angularJS，你可以使用angular.element这是jQuery的的精简版的版本。你可以用它做几乎所有的事情，所以你不需要包含jQuery。

因此，基本上，你可以重写你的代码是这样的：

link: function (scope, iElement, iAttrs) { 
    var svgTag = angular.element('<svg width="600" height="100" class="svg"></svg>'); 
    angular.element(svgTag).appendTo(iElement[0]); 
    //... 
}

来源

2013-10-21 08:05:08 nXqd

非常感谢nXqd，确实如此。（我已经接受了切尔尼夫的回答......）感谢您指出这种可能性对我来说，将有助于更复杂的东西，我相信... – dorjeduck

顺便说一句，如果你需要挤压每个毫秒，你应该使用html的本地功能，但希望它能跨浏览器工作。顺便说一句，你可以不接受它：P [只是在开玩笑] – nXqd

你的代码不起作用，但我的确如此：D http://jsfiddle.net/cherniv/78tKx/ – Cherniv

如果你的目标元素是空的，将只包含<svg>标签，你可以考虑使用ng-bind-html如下：

申报您在指令范围变量中的HTML标记

link: function (scope, iElement, iAttrs) { 

    scope.svgTag = '<svg width="600" height="100" class="svg"></svg>'; 

    ... 
}

然后，在您的指令模板中，只需添加p埃洛普在属性要追加的SVG标记的确切地点：

<!-- start of directive template code --> 
... 
<!-- end of directive template code --> 
<div ng-bind-html="svgTag"></div>

不要忘了包括ngSanitize允许ng-bind-html自动解析HTML字符串信任的HTML，避免不安全的代码注入警告。

See official documentation了解更多详情。

来源

2015-10-13 16:19:07 Freezystem

AngularJS - 将HTML元素添加到dom中，不含jQuery指令

回答

相关问题