AngularJS Directive - dynamic input name binding

Question

I am attempting to learn a little more about AngularJS' directives and have run into this situation. I would like to make a yes-no radio control that I can reuse. I have gotten most of the way - I think - but need a little push 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 looks like this:

<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 am using it like this (simplified):

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

Unfortunately what I am getting in the person object is a property {{field}} instead of happy like I would like. I keep telling myself that something like what I am attempting is possible and I just need to find it; but what.

Help please.

Update

Thank you, @HackedByChinese that helped a little but still not quite there. The problem is that I do want two way binding so that the value of the radios is populated into the parent scope; instead, when I inspect the person object it has a {{field}} property and not a happy property.

I am thinking that this is just something that AngularJS does not support in looking at:

AngularJS: Fields added dynamically are not registered on FormController

...and:

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

Answer 1

I ran into the same problem. The simplest solution is to inject the name value directly into the template string.

It works as long as you don't need the name value to be bound (ie. it doesn't need to change during the lifetime of the directive). Considering the way the name attribute is usually used, I think this constraint is not an problem.

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

This solution is a bit messy, because of the inline html. If you want to load the template from a file as in the original question, you can do it like this:

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

Answer 2

Well if you just want field to contain the string value that was entered, you can use the @ prefix for the attribute to indicate it is a text binding (it will interpret the value of the attribute as literal text).

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

Click for demo.

On the other hand, if you need field to bind to the value an expression provided to the attribute (for example, you want to bind to a property on the parent scope), then you need to change the template HTML to evaluate field (simply {{field()}}) because they will be functions. The difference here is if people want to provide string values directly, they'll need to put it in quotes like your original example. I would also recommend a one-way binding, since it seems unlikely your directive would want to modify the parent scope value since it's just a name. Use the & prefix for that.

  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.