AngularJS conditional attribute (directive)

Question

The concept:

<form-field ng-repeat="field in fields" field-model='settings[field.name]'
   {{field.match == undefined && '' || 'field-match="settings[field.match]"'}}>
</form-field>

As you can see, i'm trying to get conditional attribute - if field.match is set - I'd like to get:

<form-field field-model='settings[field.name]' field.match="settings[field.match]"></form-field>

otherwise:

<form-field field-model='settings[field.name]'></form-field>

Unfortunately I got Error: The string contains invalid characters.

I tried (? : ) syntax with the same result, but I found AngularJS conditionals in HTML Attribute that it should be && || syntax... What I'm doing wrong?

edited Here's my directive:

KPNDirectives.directive("formField", function ($compile) {
  return {
    restrict: 'E',
    replace:true,
    scope: {
      fieldModel : '=', 
      fieldMatch : '=' 
    },
    template:"<div></div>",
    link: function (scope, element, attrs) {
      var type = attrs.fieldType || 'text';
      var requiredAttr = attrs.fieldRequired ? ' required' : ""
      var requiredHelp = ""
      var matchAttr = ""
      var matchHelp = ""
      console.log(attrs);
      if (attrs.hasOwnProperty('fieldMatch')) {
        matchAttr = " password-match=\"fieldMatch\"";
        matchHelp = '<span ng-show="form.'+attrs.fieldName+'.$error.unique">NOT UNIQUE</span>';
      } else {
        matchAttr = ""
        matchHelp = ""
      }
      if (attrs.fieldRequired == "true") {
        var requiredAttr="required"
        var requiredHelp = '<span ng-show="form.'+attrs.fieldName+'.$error.required">REQUIRED</span>';
      } else {
        requiredAttr = ""
        requiredHelp = ""
      }

      var htmlText =  
      '<div class="form-group" ng-form="form" ng-class="{true: \'has-error\', false: \'has-success\'}[form.'+attrs.fieldName+'.$invalid]">'+
      '<label class="control-label col-sm-2" for="'+attrs.fieldName+'">'+attrs.fieldLabel+'</label>'+
      '<div class="col-sm-6">'+ 
      '<input class="form-control" type="'+type+'" placeholder="enter valid name" name="'+attrs.fieldName+'" ng-model="fieldModel" ng-minlength=3 ng-maxlength=20 '+ matchAttr + requiredAttr+'/>'+
      '<span class="help-block">'+
      requiredHelp +
      matchHelp+
      '<span ng-show="form.'+attrs.fieldName+'.$error.minlength">TOO LESS CHARS</span>'+
      '<span ng-show="form.'+attrs.fieldName+'.$error.maxlength">TOO MUCH CHARS</span>'+
      '&nbsp;'+
      '</span>'+
      '</div>'+
      '</div>';
      // console.log(htmlText)
      element.append(htmlText);
      $compile(element.contents())(scope); 
    }
  }
});

rewritten · Accepted Answer · 2014-01-03 16:05:40Z

1

Templates and in general parseable text only goes inside attribute values (when some directive uses them) or in plain text nodes, surrounded by curlies.

You can obtain the needed result by putting your codintional inside of the field-match attibute, like

<form-field ng-repeat="field in fields" field-model='settings[field.name]'
   field-match="{{field.match && settings[field.match]}}">
</form-field>

Edit (after the OP added his code):

To interpolate values in attributes, use attrs.$observe (see ng.$compile.directive.Attributes ) in the link function, instead of linking the attribute in the isolated scope definition.

attrs.$observe("fieldMatch", function(fieldMatch) {
     $scope.fieldMatch = fieldMatch;
  }
)

edited Jan 3, 2014 at 16:05

answered Jan 3, 2014 at 15:25

rewritten

16.5k2 gold badges49 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tomasz Brzezina Over a year ago

Syntax Error: Token 'field.match' is unexpected, expecting [:] at column 3 of the expression [{{field.match && settings[field.match]}}] starting at [field.match && settings[field.match]}}]

rewritten Over a year ago

It depends on the directive you use. form-field as far as I remember is not part of AngularJS, so be sure to read the documentation, or to manage correctly the value templating if you have written the directive.

Tomasz Brzezina Over a year ago

It's my own directive and you're right - it expects that field-match is an object not string.... that's why i'm trying to put whole attr in {{ }}

rewritten Over a year ago

If it expects an object, then try with field-match="field.match && settings[field.match]"

Tomasz Brzezina Over a year ago

Attributes {$$element: JQLite[1], $attr: Object, ngRepeat: "field in tabItem.fields", fieldModel: "settings[field.name]", …} $$element: JQLite[1] $$observers: Object $attr: Object fieldMatch: "field.match && settings[field.match]" fieldModel: "settings[field.name]" fieldName: "newpasscompare"

|

Collectives™ on Stack Overflow

AngularJS conditional attribute (directive)

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related