Angular directive to add attributes to an element - angularjs

Question

I have the following HTML / Angular code on a form:
<span class="error" ng-if="model.errors['message.email']" ng-bind="model.errors['message.email'][0]"></span>
I would like to use less code so the following would render the same:
<span class="error" model-validator="message.email" validator-errors="model.errors"></span>
Note
When validator-errors is not present then the default would be "errors" so I would get:
<span class="error" ng-if="errors['message.email']" ng-bind="errors['message.email'][0]"></span>
UPTATE 1
I tried the following:
.directive('modelValidator', function () {
return {
restrict: 'A',
replace: false,
link: function (scope, element, attrs) {
var validator = element.attr('model-validator');
if (validator === "null")
return;
var errors = element.attr('validator-errors');
element.attr('data-ng-if', errors + "['" + validator + "']");
element.attr('data-ng-bind', errors + "['" + validator + "'][0]");
}
};
But this is not adding the attributes ...
UPDATE 2
The directive is working. I would like to just add a few things:
How to use an attribute to specify which variable contains the errors?
On the directive "scope.model.errors" would be "scope.allErrorsToDisplay".
Do I need to watch all scope? Can I only watch model.errors?
Or considering (1), watch the variable in "validator-errors"?
Here is my current code:
angular.module('Application')
.directive('validator', function () {
return {
restrict: 'A',
replace: false,
link: function (scope, element, attribute) {
scope.$watch(function () {
if (scope.model.errors) {
if (scope.model.errors[attribute.validator]) {
element.show();
element.text(scope.model.errors[attribute.validator][0]);
} else
element.hide();
} else
element.hide();
});
}
}
});
Update 3
This seems to do everything I need.
Does anyone has any suggestion to improve it?
angular.module('app')
.directive('validator', ['$parse', function ($parse) {
return {
restrict: 'A',
replace: false,
link: function (scope, element, attributes) {
scope.$watch(function () {
var errors = $parse('validatorErrors' in attributes ? attributes["validatorErrors"] : 'model.errors')(scope);
if (errors) {
if (errors[attributes.validator]) {
element.show();
element.text(errors[attributes.validator][0]);
} else
element.hide();
} else
element.hide();
});
}
}
}]);

Answer 1

I think your approach is too complicated. The power of directives is that you don't have to add other directives to accomplish what you want. If i'm understanding your question correctly, you want your element to display a message if the error exists. How about this?
<!-- html -->
<div ng-controller="mainController">
<div validate="email"></div>
<div validate="name"></div>
</div>
// controller
function mainController ($scope) {
$scope.model = {
errors: {
email: 'Your email is invalid!'
, name: undefined
}
}
}
// directive
function validate () {
return {
restrict: 'A'
, replace: false
, link: function (scope, elem, attr) {
if (scope.model.errors[attr.validate]) {
elem.text(scope.model.errors[attr.validate]);
}
}
}
}
codepen