将新指令附加到现有指令

时间:2015-09-30 18:22:57

标签: javascript angularjs svg angularjs-directive

这是我用来创建新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以产生所需的结果,但我不知道如何创建该指令。

1 个答案:

答案 0 :(得分:0)

只需在 //Global Scope var a=1, b =2; var classObj = { someMemberFunction: function(param1, param2){ var localVariable; $.AsyncCallFn(param1, param2).then(function(param3,param4){ alert(a); //1 -->? alert(b); //2 -->? alert(param1); //3 -->? alert(param2); //4 -->? alert(param3); //5 -->? alert(param4); //6 -->? alert(localVariable); //7 -->? }); }; } classObj.someMemberFunction(5,6); 调用时将空字符串添加到attrs对象即可。

请查看下面的演示或此jsfiddle

&#13;
&#13;
makeSvg
&#13;
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;
    }
}
&#13;
&#13;
&#13;