4

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

Community
  • 1
  • 1
kalisjoshua
  • 2,306
  • 2
  • 26
  • 37
  • I am learning - have learned - that there is more than one thing involved with this; the scope, which holds the values, and the validation object, which holds the results of the various rules for the form. I am noticing that the scope is working fine. However, the validation object is not dynamically bound; it has a property named using the unresolved view contents and is what I am referring to in the **Update** above. – kalisjoshua Jan 26 '14 at 00:03
  • This should work for you [stackoverflow link][1] [1]: http://stackoverflow.com/questions/27071413/dynamic-form-name-attribute-input-type-text-name-variable-name-in – SoEzPz Nov 21 '14 at 22:40
  • Go here http://stackoverflow.com/questions/27071413/dynamic-form-name-attribute-input-type-text-name-variable-name-in – SoEzPz Nov 21 '14 at 22:41

2 Answers2

3

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.

moribvndvs
  • 42,191
  • 11
  • 135
  • 149
  • Thank you. I learned a little from your suggestion. I have updated my question a little to add some more detail. – kalisjoshua Jan 24 '14 at 13:46
  • Can you make your own plnkr example to show me your problem? In both my examples the two-way binding is working correctly, so you must be referring to something I'm not catching in your example. The issues you linked regard accessing dynamically added field elements to a form in the scope (which is more relevant to things like validation). – moribvndvs Jan 24 '14 at 22:28
  • I am trying but I'm not used to using [Fiddle](http://jsfiddle.net) or setting up angular apps; this is my first one. Neither of the plnkr links you provided worked for me while at work. Here is [what I have so far](http://jsfiddle.net/kalisjoshua/zkHmh/1/). – kalisjoshua Jan 25 '14 at 02:33
0

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