Question

我仍然是Angular的新手，有太多的做事方式，所以很难弄清楚如何做最好的事情。简而言之，我正在尝试在Angular中创建一个有条件地呈现输入[type =“text”]或textarea的指令。在我的templateUrl中，我原来是这样做的：

<div class="row">
  <label ng-if="label" for="{{inputId}}" class="input-label">{{label}}</label>
  <input ng-if="inputType !== 'textarea'" id="{{inputId}}" type="text" class="input" ng-model="$parent.model">
  <textarea ng-if="inputType === 'textarea'" id="{{inputId}}" class="input" ng-model="$parent.model"></textarea>
</div>

但这会产生很多问题，因为你可以看到我必须使用$ parent.model，它感觉更乱。此外，输入/ textarea在我的链接函数中还没有，除非我做了一个丑陋的$ timeout（然后将异步问题传播到我的单元测试）。然后我决定将ng-if改为ng-show：

<div class="row">
  <label ng-if="label" for="{{inputId}}" class="input-label">{{label}}</label>
  <input ng-show="inputType !== 'textarea'" id="{{inputId}}" type="text" class="input" ng-model="model">
  <textarea ng-show="inputType === 'textarea'" id="{{inputId}}" class="input" ng-model="model"></textarea>
</div>

这很好，但我不喜欢为我渲染的每个指令都有一个隐藏的textarea /输入。这感觉不对。我现在正在尝试使用编译函数来有条件地创建输入/ textarea并将其插入标签之后：

<div class="row">
  <label ng-if="label" for="{{inputId}}" class="input-label">{{label}}</label>
</div>

然后在我的指令中（对不起，Coffeescript讨厌）：

compile: (tElem, tAttrs) ->
  inputId = tAttrs.inputId
  if tAttrs.inputType is 'textArea'
    html = "<input id=\"#{inputId}\" type=\"text\" class=\"input\" ng-model=\"model\">"
   else
    html = "<textarea id=\"#{inputId}\" class=\"input\" ng-model=\"model\"></textarea>"
  tElem.find('label').after(angular.element(html))

我也非常批评这种方法，因为我基本上将我的模板拆分为两个不同的地方，并且可能会混淆试图找出来自哪里的东西。我愿意插入一个虚拟元素并在编译函数中替换它。

一种方法是否超越所有其他方法？我的想法有什么根本错误吗？谢谢！

Answer 1

您可以使用模板作为函数来生成模板：

app.directive 'myDirective' , ()->
  template: (tElem, tAttrs)->
    if tAttrs.inputType is 'textArea'
      """
      <div class="row">
        <label ng-if="label" for="{{inputId}}" class="input-label">{{label}}</label>
        <input id="{{inputId}}" type="text" class="input" ng-model="model">
      """
    else
      """      
      <div class="row">
        <label ng-if="label" for="{{inputId}}" class="input-label">{{label}}</label>
        <textarea id="{{inputId}}" class="input" ng-model="model"></textarea>
      </div>
      """

AngularJS：编译与模板

1 个答案: