ng-messages no longer interprets its attribute value properly

[davidwalschots]

In order to minimize the amount of html needed for validation, at our office, we created a directive on top of ng-messages. Sadly, moving from 1.4.0-beta.4/angular-messages.js to 1.4.0-beta.5/angular-messages.js (and later version). Our code no longer works.

The error is as follows:

Syntax Error: Token '{' invalid key at column 2 of the expression [{{::messages.fullFieldName}}.$error] starting at [{::messages.fullFieldName}}.$error].

The template for this directive is as follows:

<div class="validation-message" ng-messages="{{::messages.fullFieldName}}.$error" ng-show="{{::messages.fullFieldName}}.$invalid && !{{::messages.fullFieldName}}.$pending && ({{::messages.formName}}.$submitted || {{::messages.fullFieldName}}.$touched)">
  <div ng-transclude></div>
</div>

The directive is defined as follows:

function indMessages() {
    var controller = function ($element) {
      var vm = this;
      var form = $element.inheritedData('$formController');

      // Unfortunately required controllers are not injectable into our own controller, only into our link function.
      // Here's a solution, feels a bit hacky but nicer than creating a link function just for this; based on: http://stackoverflow.com/a/21252383/198797; also used in core angular code: https://github.com/angular/angular.js/blob/adcc5a00bf582d2b291c18e99093bb0854f7217c/src/ng/directive/input.js#L1614
      vm.formName = form.$name;
      vm.fullFieldName = vm.formName + '.' + vm.fieldName;
    }

    controller.$inject = ['$element'];

    return {
      restrict: 'E',
      require: '^^form',
      templateUrl: '/views/templates/ind-messages.html',
      bindToController: {
        fieldName: "@for"
      },
      controllerAs: 'messages',
      transclude: true,
      replace: true,
      scope: true,

      controller: controller
    };
  }

Is the above due to a programming error on our part? Or was there a change with unexpected side-effects inside the angular-messages.js code?

[Narretz]

Can you please provide a runnable example inside a plnkr or jsfiddle? Thanks!

[davidwalschots]

Of course! It can be found here: http://plnkr.co/edit/p1bHusDA7ZyXhuW9Ymz9

[gkalpak]

You could make it work by changing:

ng-messages="{{::messages.fullFieldName}}.$error"

to:

ng-messages="::this.$eval(messages.fullFieldName)['$error']"

(updated Plnkr).

But I am not sure this is a nice solution.

[singhsays]

I'm seeing this issue are well. No custom directive or anything, just plain vanilla ng-messages. It seems to me, that the ng-messages directive no longer interpolates the ng-messages and for attribute values.

Demo:
http://jsfiddle.net/singhsays/m06jeth1/ (works fine with 1.3.15, upto 1.4.0-beta.4)
http://jsfiddle.net/singhsays/oq473qyq/ (same code, stopped working at 1.4.0-beta.5)

[tkrotoff]

+1, I have the same problem

[sravenhorst]

This issue is basicly this:

in Angular 1.4.0.beta.4 the ngMessages/for attribute were read in the (post)link function. Here the "dynamic" value was already parsed before read in the (post)link.

In later Angular 1.4.X versions, the value in the ngMessages/for attribute is already read in the controller function, where the attribute isn't parsed yet.

@Narretz, as you set the status of this issue:
The solution would be to link the ngMessages/for attributes through bindToController so it's parsed before read.
I hope enough info is applied to pick this up.

A workaround we've introduced for now in our app, is something like you find in this fiddle: http://jsfiddle.net/m06jeth1/20/

So basicly: we added a custom directive to set the "for" attribute dynamicly.
But as said: this is a workaround and i hope the real issue will be solved within angular-messages.js.

Groet,
Sander

[tkrotoff]

@sravenhorst Your jsfiddle (http://jsfiddle.net/m06jeth1/20/) is missing something: it never displays "This is a required field"