Question

我需要能够根据描述它们的对象数组显示输入。例如，这描述了2个输入foo和bar：

$scope.z.inputs = [{
  name: "foo",
  hint: "Enter foo number.",  // if hint is specified, it should be in a tooltip
  min: "2", // this is optional
  max: "100" // this is optional
}, {
  name: "bar"
}];

请参阅plunkr：http://plnkr.co/edit/giWusNpiRhHibJi3hr2e?p=preview 它有一个粗略的指令，适用于静态输入。它无法处理其他输入（foo和bar）。该指令上方的注释描述了它提供的功能。

在保持指令提供的额外功能的同时，可以采用什么方法来处理这些输入？

我尝试了什么......

在input元素上设置min =“{{in.min}}”会导致链接函数中的值为字符串“{{in.min}}”。我尝试设置范围并使用@（参见What is the difference between '@' and '=' in directive scope in AngularJS?的答案）。但是，如上所述，我不明白如何“使用attr。$ observe ......”。而我所做的尝试并没有奏效。此外，在设置指令范围后，与ng-model绑定到输入的变量不再得到更新。

在阅读Angularjs dynamic directives中提到的ng-switch方法之后我尝试过ng-switch和ng-if。我在plunkr中保留了一个ng-if。如果我可以避免使用ngswitch或ngif来处理min，max和hint之类的东西，这会有所帮助，因为它会有更多属性的笨重。

更新

在plnkr中，我使用ng-if语句来处理所有可能的组合，使min和max工作。我需要在指令中修改min和max的检查。不要检查是否指定了数字，只需检查是否指定了属性。如果是（即使是表达式），那么请不要管它，并使用正确的值进行更新。

如果有办法，我还是希望能够避免ng-ifs的扩散。

Answer 1

我找到了一个避免一堆ng-ifs的解决方案。

我使用min和max来定义表达式，数字或未定义以更智能地构建工具提示。我也相应地设置了最小值和最大值。

代码的关键部分在这里：

var min = element.attr('min');
var max = element.attr('max');

// This tooltip can handle if min and/or max are not set, are set to hard coded numbers, or are expressions.
var tooltip = "{{ ("+max+" === undefined)?'Enter an integer greater than or equal to '+("+min+" || 0)+'.':'Enter an integer within the range '+("+min+" || 0)+' and '+"+max+"+'.'}}";

if ( isNaN(min) ) {
   // If an expression was used and it ends up evaluating to be falsey or if min wasn't defined, this will make the min zero.
  element.attr('min', '{{'+min+' || 0}}');
}
if ( isNaN(max) ) {
  // If an expression was used and it ends up evaluating to be falsey or if max wasn't defined, this will set it.
  element.attr('max', '{{'+max+' || 9223372036854770000}}');
}
element.attr('tooltip', tooltip);

请参阅http://plnkr.co/edit/9JQRKcTpWiqLlujEx3MP?p=preview

AngularJS指令用于通过对象描述的输入

我尝试了什么......

更新

1 个答案: