AngularJS: Linking multiple scope variables inside external template - angularjs

Question

I am trying to build some custom directives for inputs with validations provided by ngMessages directive. Still, I can't link multiple variables from $scope to dynamically determine the form name and the input name. Here's my code so far:
The directive:
app.directive('textBox', ['$compile', function ($compile) {
return {
restrict: 'E',
scope: {
label: "#",
fieldName: "#",
bindTo: "="
},
require: "^form",
templateUrl: '/WebClient/Directives/TextBox/textBoxTemplate.html',
link: function (scope, element, attrs, ctrl) {
$scope.formName = ctrl.$name;
}
};
}]);
The template:
<div>
<label>{{label}}</label>
<input type="text" name="{{fieldName}}" ng-model="{{field}}" required />
<div ng-messages="{{formName}}.{{fieldName}}.$error">
<div ng-message="required">You left the field blank...</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
<div ng-message="email">Your field has an invalid email address</div>
</div>
</div>
The usage:
<text-box bind-to="myField" field-name="myField"></text-box>
The issues I encounter are related to the ng-messages attribute value. Doesn't seem to work when I use curly braces and it renders the text "formName.fieldName.$error" if I don't. The other issue is related to the ng-model, the same scenario applies.
Thank you!

Answer 1

You can pass the formController, ctrl in your link method to directive scope like scope.form = ctrl;.
Then you can add <div ng-messages="form[fieldName].$error"> to access the $error property.
Curly braces are only required for the name of the input field. For ng-model you can directly add the model with-out curlies because ng-model requires two-way binding to work.
Please have a look at the demo below or this jsfiddle.
angular.module('demoApp', ['ngMessages'])
.controller('mainController', MainController)
.directive('textBox', ['$compile', function ($compile) {
return {
restrict: 'E',
scope: {
label: "#",
fieldName: "#",
bindTo: "="
},
require: "^form",
templateUrl: '/WebClient/Directives/TextBox/textBoxTemplate.html',
link: function (scope, element, attrs, ctrl) {
//$scope.formName = ctrl.$name;
scope.form = ctrl;
}
};
}]);
function MainController($scope) {
$scope.myField = 'test';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-messages.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
<form name="testForm">
<text-box bind-to="model" field-name="myField"></text-box>
</form>
{{model}}
<script type="text/ng-template" id="/WebClient/Directives/TextBox/textBoxTemplate.html">
<div>
<label>{{label}}</label>
<input type="text" name="{{fieldName}}" ng-model="bindTo" required />
<div ng-messages="form[fieldName].$error">
<div ng-message="required">You left the field blank...</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
<div ng-message="email">Your field has an invalid email address</div>
</div>
</div>
</script>
</div>