AngularJS - jQuery 없이 dom에 HTML 요소 추가

AngularJS - jQuery 없이 dom에 HTML 요소 추가

나는 Angular를 가지고 있다.디렉티브의 현재 요소에 svg 태그를 추가하는 JS 디렉티브.지금은 jQuery의 도움으로 이 작업을 하고 있습니다.

link: function (scope, iElement, iAttrs) {

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

    ...
    }

단, 이 간단한 작업에 jQuery를 사용하는 것은 바람직하지 않습니다.어떻게 앵귤러와 같은 일을 할 수 있을까요?JS는 (또는 네이티브 JavaScript 코드)를 의미합니다.

심플한(강력한)을 시험해 보지 않는 이유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/

angularJS에서는 jQuery의 lite 버전인 angular.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]);
  //...
}

이런 게 필요할 거야

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

수신인 요소가 비어 있고 다음 요소만 포함할 경우<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-htmlHTML 문자열을 신뢰할 수 있는 HTML로 자동 해석하여 안전하지 않은 코드 주입 경고를 방지합니다.

자세한 내용은 공식 문서를 참조하십시오.

언급URL : https://stackoverflow.com/questions/19488803/angularjs-add-html-element-to-dom-in-directive-without-jquery