Angularjs 动态指令

Question

Angularjs 动态指令

4

注意：我对angularjs还比较新

针对以下问题，什么是最佳解决方案/最佳实践：我有一个包含不同类型值的数组，在每种类型的值中都需要使用不同的输入模板和输入验证？

例如：

var vars = [
    {
        type: 'int',
        value: 42,
        min: 0,
        max: 42
    },
    {
        type: 'text',
        value: 'foobar'
    },
]

对于“int”模板，将是

<input type="range" max="{{max}}" min="{{min}}" value="{{value}}" />

并且对于“文本”

<textarea>{{value}}</textarea>

在实际情况下，会有很多带有奇怪接口的输入。

- Viller

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michelle Tilley · Accepted Answer

一个 ng-switch（文档）可以帮助你解决这个问题；像这样的东西：

<div ng-repeat="item in items">
  <div ng-switch on="item.type">
    <div ng-switch-when="int">
      <input type="range" max="{{item.max}}" min="{{item.min}}"
        ng-model="item.value" />
    </div>

    <div ng-switch-when="text">
      <textarea ng-model="item.value"></textarea>
    </div>
  </div>
</div>

[更新]

既然您提到了希望根据类型动态包含模板，请看一下 ng-include (文档)，它接受一个 Angular 表达式，该表达式会被求值为一个 URL：

<div ng-repeat="item in items">
  <div ng-include="'input-' + item.type + '-template.htm'"></div>
</div>

如果您不喜欢内联字符串拼接，可以使用控制器方法生成URL：

<div ng-repeat="item in items">
  <div ng-include="templatePathForItem(item)"></div>
</div>

在ngInclude文档页面上的示例非常好。

请注意，所包含的模板将获得当前作用域的原型子作用域。