Это функция, которую я использую для создания нового элемента SVG
:
makeSvg = function (tag, attrs) {
var el = document.createElementNS("http://www.w3.org/2000/svg", tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}
И использование очень просто:
var result = makeSvg("my-directive", { "data-attr": "val" });
$compile(result)($scope);
Этот код работает исправно, но проблема заключается в том, что я хочу добавить другую директиву в созданную директиву. Значение result
перед compile
:
<my-directive data-attr="val"></my-directive>
Это элемент SVG, поэтому я не могу справиться с ним, как строка. Я хочу создать что-то вроде этого:
<my-directive data-attr="val" another-directive></my-directive>
После этого я вызову compile
для получения желаемого результата, но я не знаю, как создать директиву.
Просто добавьте его с пустой строкой в ваш объект attrs при вызове makeSvg
.
Пожалуйста, просмотрите демо внизу или в этом jsfiddle.
angular.module('demoApp', [])
.directive('myDir', myDirective)
.directive('anotherDirective', anotherDirective)
.controller('MainController', MainController);
function MainController() {
}
function anotherDirective() {
return {
link: function(scope, element) {
console.log('another directive added');
}
}
}
function myDirective($compile) {
return {
restrict: 'E',
replace:true,
link: function(scope, element) {
var result = makeSvg("my-directive", { "data-attr": "val", "another-directive": ""});
var compiled = $compile(result)(scope);
element.replaceWith(compiled);
}
};
function makeSvg(tag, attrs) {
var el = document.createElementNS("http://www.w3.org/2000/svg", tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp">
<my-dir></my-dir>
</div>
create directive
является проблемой?