Прикрепить новую Директиву к существующей

0

Это функция, которую я использую для создания нового элемента 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 для получения желаемого результата, но я не знаю, как создать директиву.

  • 0
    На самом деле не ясно, что вы спрашиваете. Какая часть create directive является проблемой?
  • 0
    @charlietfl Я уже говорил, что я хочу сделать! добавить «еще одну директиву» к «моей директиве» - это моя проблема. Это действительно ясно, не так ли?
Показать ещё 2 комментария
Теги:
svg
angularjs-directive

1 ответ

0
Лучший ответ

Просто добавьте его с пустой строкой в ваш объект 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>
  • 0
    Спасибо за ответ, я не знаю, почему я не мог решить это!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню