角度的变量指令名称 [英] Variable directive name in angular
问题描述
我敢肯定这已经被问过了，但是很难提一个问题，因此也很难搜索...
我的应用程序的一部分使用了多个第三方指令之一.目前，我正在使用的指令是 xeditable lib中的指令，但这问题不仅仅在于那个lib，因为我之前遇到过这种需求.
目前，我的代码如下所示:
< div ng-switch on ="editTypeNeeded">< div ng-switch-when ="textarea" editable-textarea ="myVar" onbeforesave ="doBeforeSaveStuff($ data)" class ="whatever" ng-class ="whatever2()" ng-mouseover ="doStuff()"some-other-directive =" doMoreStuff()>{{myvar}}...和其他东西</div>< div ng-switch-when ="textfield" editable-text ="myVar" onbeforesave ="doBeforeSaveStuff($ data)" class ="whatever" ng-class ="whatever2()" ng-mouseover ="doStuff()"some-other-directive =" doMoreStuff()>{{myvar}}...和其他东西</div>< div ng-switch-when ="checkbox" editable-checkbox ="myVar" onbeforesave ="doBeforeSaveStuff($ data)" class ="whatever" ng-class ="whatever2()" ng-mouseover ="doStuff()"some-other-directive =" doMoreStuff()>{{myvar}}...和其他东西</div>< div ng-switch-when ="date" editable-bsdate ="myVar" onbeforesave ="doBeforeSaveStuff($ data)" class ="whatever" ng-class ="whatever2()" ng-mouseover ="doStuff()"some-other-directive =" doMoreStuff()>{{myvar}}...和其他东西</div>...ETC...</div> 当在每个 switch 选项之间更改的 only 项是"editable-textarea"，"editable-text"等时，这就是一堆代码重复.
我想要的是将上述所有内容替换为以下内容:
< div {{directiveName}} ="myVar" onbeforesave ="doBeforeSaveStuff($ data)" class ="whatever" ng-class ="whatever2()" ng-mouseover ="doStuff()"some-other-directive ="doMoreStuff()">{{myvar}}...和其他东西</div> 这显然是行不通的，但是必须有一种方法来做类似的事情...
更新:
我最终使用了选择的答案，但稍作修改，以允许同时使用变量指令名称和指令值.像这样:
.directive('useDirective'，函数($ compile){返回 {限制:"A"，链接:函数(作用域，元素，属性){attrs.$ observe('useDirective'，function(directiveNameAndValue){如果(directiveNameAndValue){var nameAndValue = directiveNameAndValue.split('=')，dirName = nameAndValue [0]，值= nameAndValue [1] ||'';elem.attr(dirName，value);elem.removeAttr('use-directive');$ compile(elem)(scope);}});}};}); 我这样使用它:
< div use-directive ="{{getDirectiveType(value)}} = value" class ="pointer" onbeforesave ="notifyOfChange($ data)"> {{value}}</div> 插播示例: http://plnkr.co/edit/JK5TkFKA2HutGJOrMo8a?p=preview
更新2:
我发现上述技术似乎无法与angular-animate.js库配合使用.这会导致该lib多次引发以下错误:
TypeError:无法读取未定义的属性"parentNode"在angular-animate.js:1203在angular-animate.js:539在n.digest(angular.js:14358)在n.$ apply(angular.js:14571)在angular.js:16308在e(angular.js:4924)在angular.js:5312 尽管如此，该页面仍然可以正常工作.
您可以创建一条指令来将所有规则都规则化:
< div lord-of-the-directives ="{{directiveName}}"> 那会是
module.directive('lordOfTheDirectives'，函数($ compile){返回 {限制:"A"，链接:函数(作用域，元素，属性){attrs.$ observe('lordOfTheDirectives'，function(dirName){如果(dirName){elem.append('< div'+ dirName +'>');$ compile(elem)(scope);}});}};}); (未经测试，但这就是想法)
通过在注释中的请求更新，以使元素保持原样(包括其类和内容):
module.directive('lordOfTheDirectives'，函数($ compile){返回 {限制:"A"，链接:函数(作用域，元素，属性){attrs.$ observe('lordOfTheDirectives'，function(dirName){如果(dirName){elem.attr(dirName，'');elem.removeAttr('指令之王');$ compile(elem)(scope);}});}};}); I'm sure this has been asked before, but it's kind of hard to put into a question and, therefore, is also hard to search for...
A piece of my app uses one of several third-party directives. The directives I'm messing with, at the moment, are those in the xeditable lib, but this question isn't just about that lib, as I've come across this need before.
My code, currently, looks something like the following:
<div ng-switch on="editTypeNeeded">
<div ng-switch-when="textarea" editable-textarea="myVar" onbeforesave="doBeforeSaveStuff($data)" class="whatever" ng-class="whatever2()" ng-mouseover="doStuff()" some-other-directive="doMoreStuff()">
{{myvar}}
...
and other stuff
</div>
<div ng-switch-when="textfield" editable-text="myVar" onbeforesave="doBeforeSaveStuff($data)" class="whatever" ng-class="whatever2()" ng-mouseover="doStuff()" some-other-directive="doMoreStuff()">
{{myvar}}
...
and other stuff
</div>
<div ng-switch-when="checkbox" editable-checkbox="myVar" onbeforesave="doBeforeSaveStuff($data)" class="whatever" ng-class="whatever2()" ng-mouseover="doStuff()" some-other-directive="doMoreStuff()">
{{myvar}}
...
and other stuff
</div>
<div ng-switch-when="date" editable-bsdate="myVar" onbeforesave="doBeforeSaveStuff($data)" class="whatever" ng-class="whatever2()" ng-mouseover="doStuff()" some-other-directive="doMoreStuff()">
{{myvar}}
...
and other stuff
</div>
...
etc...
</div>
That's a TON of code duplication when the only thing that changes between each switch option is "editable-textarea", "editable-text", etc.
What I would like is to replace all of the above with something like this:
<div {{directiveName}}="myVar" onbeforesave="doBeforeSaveStuff($data)" class="whatever" ng-class="whatever2()" ng-mouseover="doStuff()" some-other-directive="doMoreStuff()">
{{myvar}}
...
and other stuff
</div>
which, obviously, doesn't work, but there's got to be a way to do something like that...
Update:
I ended up using the selected answer, but with a slight modification to allow for both a variable directive name AND a directive value. Like so:
.directive('useDirective', function ($compile) {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
attrs.$observe('useDirective', function(directiveNameAndValue) {
if (directiveNameAndValue) {
var nameAndValue = directiveNameAndValue.split('='),
dirName = nameAndValue[0],
value = nameAndValue[1] || '';
elem.attr(dirName, value);
elem.removeAttr('use-directive');
$compile(elem)(scope);
}
});
}
};
});
And I use it like this:
<div use-directive="{{getDirectiveType(value)}}=value" class="pointer" onbeforesave="notifyOfChange($data)">{{value}}</div>
Plunker example: http://plnkr.co/edit/JK5TkFKA2HutGJOrMo8a?p=preview
Update 2:
I've found that the above technique doesn't seem to play nicely with the angular-animate.js lib. It causes that lib to kick up the following error a bunch of times:
TypeError: Cannot read property 'parentNode' of undefined
at angular-animate.js:1203
at angular-animate.js:539
at n.$digest (angular.js:14358)
at n.$apply (angular.js:14571)
at angular.js:16308
at e (angular.js:4924)
at angular.js:5312
though, the page still seems to work fine.
You can create a directive to-rule-them-all:
<div lord-of-the-directives="{{directiveName}}">
Which would be like
module.directive('lordOfTheDirectives', function ($compile) {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
attrs.$observe('lordOfTheDirectives', function(dirName) {
if (dirName) {
elem.append('<div ' + dirName + '>');
$compile(elem)(scope);
}
});
}
};
});
(not tested but that's the idea)
Update by request in comment, to keep the element as is (with its classes and stuff):
module.directive('lordOfTheDirectives', function ($compile) {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
attrs.$observe('lordOfTheDirectives', function (dirName) {
if (dirName) {
elem.attr(dirName, '');
elem.removeAttr('lord-of-the-directives');
$compile(elem)(scope);
}
});
}
};
});
这篇关于角度的变量指令名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
