AngularJS Directive - Dynamic Input Name Binding

Question

I am trying to learn a little more about AngularJS directives and have come across this situation. I would like to use a yes-no radio control that I can reuse. I got most of the way, I think, but I need to push a little in the right direction.

I have this directive:

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

    var config;

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

    return config;
  });

... and the template is as follows:

<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>

... and I use it like this (simplified):

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

Unfortunately, I get persona property in the object {{field}}instead happy, as I would like. I keep telling myself that something like what I'm trying is possible, and I just need to find it; but what.

Help me please.

Update

, @HackedByChinese, , . , , ; , person, {{field}}, happy.

, , AngularJS :

AngularJS: FormController

... :

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

Answer 1

, , field , @ , , ( ).

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

.

, field , (, ), HTML field ( {{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>

.

Answer 2

. - .

, (.. ). , 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');
      }
    };
});

- html. , , :

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);
          });
      }
    };
}]);