AngularJS - 在没有 jQuery 的指令中将 HTML 元素添加到 dom

Posted 2023-03-05

【中文标题】AngularJS - 在没有 jQuery 的指令中将 HTML 元素添加到 dom

【英文标题】：AngularJS - add HTML element to dom in directive without jQuery

【发布时间】：2013-10-29 14:35:03

【问题描述】：

我有一个 AngularJS 指令，我想在其中添加一个 svg 标记到指令的当前元素。现在我在 jQuery 的帮助下做到了这一点

link: function (scope, iElement, iAttrs) 

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

    ...
    

但我不希望指令依赖 jQuery 来完成这个简单的任务。我将如何使用 AngularJS 手段（或本机 javascript 代码）来完成同样的任务。

【参考方案1】：

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

iElement.html('<svg   class="svg"></svg>');

或者append作为替代：

iElement.append('<svg   class="svg"></svg>');

当然还有更简洁的方式：

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

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

【讨论】：

谢谢你成功了 - angularjs的新手......再次感谢

@dorjeduck 欢迎您，看看我附加的 jsFiddle 链接

但它没有附加角度控件

@MuneemHabib ，它仅对原始 html 有用。否则你需要使用$compile：docs.angularjs.org/api/ng/service/$compile

【参考方案2】：

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

所以基本上，你可以把你的代码改写成这样：

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

【讨论】：

非常感谢 nXqd，确实做到了。 （我已经接受了 Cherniv 的回答...）感谢您向我指出这种可能性，我相信这将对更复杂的事情有所帮助...

顺便说一句，如果你需要压缩每毫秒，你应该使用 html 的原生函数，但希望它可以跨浏览器工作。顺便说一句，你可以不接受它：P [开个玩笑]

angular.element 没有 .appendTo docs.angularjs.org/api/ng/function/angular.element

..但它确实有附加所以只需切换父/子情况

对于 前置 angular.element(svgTag).prependTo(iElement[0]);。谢谢@nXqd

【参考方案3】：

你可以使用这样的东西

var el = document.createElement("svg");
el.style.;
el.style.;
....
iElement[0].appendChild(el)

【讨论】：

感谢帕维尔的回答。我试过了，但我得到的只是 dom 中的“”，没有宽度、高度属性（在谷歌浏览器中）

你需要 Element.style.width

谢谢嘉约。我刚试过 el.style.width=600;但仍然没有成功，我想我误解了你的答案

el.style.width = '600px'

【参考方案4】：

如果您的目标元素为空且仅包含<svg> 标签，您可以考虑使用ng-bind-html，如下所示：

在指令范围变量中声明您的 HTML 标记

link: function (scope, iElement, iAttrs) 

    scope.svgTag = '<svg   class="svg"></svg>';

    ...

然后，在您的指令模板中，只需在要附加 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 了解更多详情。