web-dev-qa-db-ja.com

AngularJS-jQueryなしでディレクティブのdomにHTML要素を追加します

AngularJSディレクティブがあり、svgタグをディレクティブの現在の要素に追加します。今、私はjQueryの助けを借りてこれを行います

link: function (scope, iElement, iAttrs) {

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

    ...
    }

それでも、この単純なタスクのためにディレクティブをjQueryに依存させたくありません。 AngularJS手段（またはネイティブJavaScriptコード）で同じことをどのように達成しますか。

javascriptjqueryhtmlangularjs
39
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/

57
Cherniv

AngularJSでは、jQueryのライトバージョンであるangle.elementを使用できます。それでほとんど何でもできるので、jQueryを含める必要はありません。

したがって、基本的には、コードを次のように書き換えることができます。

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

このようなものを使用できます

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

宛先要素が空で、<svg>タグのみが含まれる場合、次のようにng-bind-htmlの使用を検討できます。

ディレクティブスコープ変数でHTMLタグを宣言します

link: function (scope, iElement, iAttrs) {

    scope.svgTag = '<svg width="600" height="100" 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に自動的に解析し、安全でないコード挿入警告を回避できるようにします。

公式ドキュメントを参照 詳細については。

2
Freezystem