javascript - AngularJS 指令 - 动态输入名称绑定(bind)

Question

我正在尝试更多地了解 AngularJS 的指令，但遇到了这种情况。我想做一个可以重复使用的是-否 radio 控制。我已经完成了大部分工作 - 我认为 - 但需要朝着正确的方向稍加插入。

我有这个指令:

app
  .directive('yesno', function () {
    'use strict';

    var config;

    config = {
      replace: true,
      require: 'ngModel',
      restrict: 'E',
      scope: {
        field: '=',
        model: '='
      },
      templateUrl: 'views/yesno.html'
    };

    return config;
  });

...模板如下所示:

<fieldset class="yesno">
  <input id="{{field}}-yes" name="{{field}}" ng-model="model" type="radio" value="yes" />
  <label for="{{field}}-yes">Yes</label>
  <input id="{{field}}-no" name="{{field}}" ng-model="model" type="radio" value="no" />
  <label for="{{field}}-no">No</label>
</fieldset>

...我正在这样使用它(简化):

<form name="person">
  <yesno field="'happy'" model="happy" />
</form>

不幸的是，我在 person 对象中得到的是属性 {{field}} 而不是我想要的 happy 。我一直告诉自己，像我正在尝试的事情是可能的，我只需要找到它；但是什么。

请帮忙。

更新

谢谢你，@HackedByChinese 帮了一点忙，但还不够。问题是我确实想要双向绑定(bind)，以便将 radio 的值填充到父范围中；相反，当我检查 person 对象时，它有一个 {{field}} 属性，而不是一个 happy 属性。

我认为这只是 AngularJS 不支持的东西:

AngularJS: Fields added dynamically are not registered on FormController

...和:

https://github.com/angular/angular.js/issues/1404

Answer 1

好吧，如果您只是想让 field 包含输入的字符串值，您可以为该属性使用 @ 前缀来指示它是一个文本绑定(bind)(它会将属性的值解释为文字文本)。

  scope: {
    field: '@',
    model: '='
  },

Click for demo .

另一方面，如果您需要 field 绑定(bind)到提供给属性的表达式的值(例如，您想要绑定(bind)到父作用域上的属性)，那么您需要更改模板 HTML 以评估 field(简单地 {{field()}})，因为它们将是函数。这里的区别在于，如果人们想直接提供字符串值，他们需要像您的原始示例一样将其放在引号中。我还推荐一种单向绑定(bind)，因为您的指令似乎不太可能想要修改父作用域值，因为它只是一个名称。为此使用 & 前缀。

  scope: {
    field: '&',
    model: '='
  },

<fieldset class="yesno">
  <input id="{{field()}}-yes" name="{{field()}}" ng-model="model" type="radio" value="yes" />
  <label for="{{field()}}-yes">Yes</label>
  <input id="{{field()}}-no" name="{{field()}}" ng-model="model" type="radio" value="no" />
  <label for="{{field()}}-no">No</label>
</fieldset>

Click for second demo.