Javascript AngularJS指令-动态输入名称绑定

我试图学习更多关于AngularJS指令的知识，并且遇到了这种情况。我想做一个是非无线电控制，我可以重复使用。我想，我已经完成了大部分工作，但需要朝着正确的方向努力

我有这个指示：

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>

app
  .directive('yesno', ['$http', '$templateCache', '$compile',
  function ($http, $templateCache, $compile) {
    return {
      restrict: 'E',
      scope: {
        field: '@',
        model: '='
      },
      link: function(scope, element) {
        $http.get('views/yesno.html', {cache:$templateCache})
          .then(function(response) {
            var content = angular.element(response.data.replace('{{field}}', scope.field, 'g'));
            element.append(content);
            $compile(content)(scope);
          });
      }
    };
}]);

对
不

…我是这样使用的（简化）：

不幸的是，我在

person

对象中得到的是一个属性

{{field}

，而不是我想要的

happy

。我一直告诉自己，像我正在尝试的东西是可能的，我只需要找到它；但是什么呢

请帮忙

更新

谢谢你，@HackedByChinese虽然帮了一点忙，但还是不够。问题是我确实需要双向绑定，以便将radios的值填充到父范围中；相反，当我检查

person

对象时，它有一个

{{field}

属性，而不是

happy

属性

我认为这正是AngularJS不支持的：

……和：

---

如果您只想

字段

包含输入的字符串值，可以使用属性的

@

前缀来指示它是文本绑定（它将属性的值解释为文本）

另一方面，如果需要将

字段

绑定到为属性提供的表达式的值（例如，要绑定到父作用域上的属性），则需要更改模板HTML以计算

字段

（简单地说，

{field（）}

），因为它们将是函数。这里的区别是，如果人们想直接提供字符串值，他们需要像原始示例一样将其放在引号中。我还建议使用单向绑定，因为您的指令似乎不太可能想要修改父范围值，因为它只是一个名称。使用

&

前缀来表示

  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>

范围：{
字段：“&”，
型号：'='
},
对
不

---

我遇到了同样的问题。最简单的解决方案是将名称值直接注入模板字符串

只要不需要绑定name值（即，在指令的生命周期内不需要更改），它就可以工作。考虑到name属性通常的使用方式，我认为这个约束不是问题

app
  .directive('yesno', function () {
    return {
      replace: true,
      restrict: 'E',
      scope: {
        field: '@',
        model: '='
      },
      template: function(element, attrs) {
        return '<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>'.replace('{{field}}', attrs.field, 'g');
      }
    };
});

---

非常感谢。我从你的建议中学到了一点。我已经更新了我的问题，增加了一些细节。你能用你自己的plnkr例子来说明你的问题吗？在我的两个示例中，双向绑定都正常工作，因此您一定是指在您的示例中我没有捕捉到的东西。您链接的问题涉及将动态添加的字段元素访问到范围中的表单（这与验证之类的事情更相关）；这是我的第一个。你提供的plnkr链接在我工作时都不起作用。这里是。我正在学习-已经学习-这涉及到不止一件事；范围（保存值）和验证对象（保存表单的各种规则的结果）。我注意到示波器工作正常。但是，验证对象不是动态绑定的；它有一个名为using the unresolved view contents的属性，这是我在上面的更新中提到的。这应该适用于您[stackoverflow link][1][1]：转到此处

app
  .directive('yesno', function () {
    return {
      replace: true,
      restrict: 'E',
      scope: {
        field: '@',
        model: '='
      },
      template: function(element, attrs) {
        return '<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>'.replace('{{field}}', attrs.field, 'g');
      }
    };
});

app
  .directive('yesno', ['$http', '$templateCache', '$compile',
  function ($http, $templateCache, $compile) {
    return {
      restrict: 'E',
      scope: {
        field: '@',
        model: '='
      },
      link: function(scope, element) {
        $http.get('views/yesno.html', {cache:$templateCache})
          .then(function(response) {
            var content = angular.element(response.data.replace('{{field}}', scope.field, 'g'));
            element.append(content);
            $compile(content)(scope);
          });
      }
    };
}]);