How to conditonally apply attribute in angular? - html

Question

I have this problem:
I want to compare variable to ngModel input.
I'm doing that with directive:
Html:
<input type='text' ng-model='firstPerson.name' same-as-person='secondPerson.name'>
JS:
app.directive('sameAsPerson'), function() {
return {
require: 'ngModel',
restrict: 'A',
link: function ($scope, $element, $attrs, ctrl) {
var validate = function (firstValue) {
var secondValue = $attrs.sameAsPerson;
ctrl.$setValidity('sameAsPerson', firstValue == secondValue);
return firstValue ;} ;
ctrl.$parsers.unshift(validate);
ctrl.$formatters.unshift(validate);
$attrs.$observe('sameAsPerson', function(secondValue) {
return validate (ctrl.$viewValue);})}} ;}) ;
SameAsPerson is a costume directive that requires ngModel, restrict 'A' and set validity on the input based on the comparison between the values.
It works fine - if the firstPerson.name not equals to secondPerson.name the input border is red.
But!
In case there is not secondPerson on the scope I don't want the attribute same-as-person to be rendered to the html.
I tried to use the ng-attr but it doesn't seem to work.
In the current scenario if secondPerson doesn't exist the value of secondPerson.name in the directive is empty string.
Notice that in case secondPerson exist but the name is "" I still want to show red input.
In addition to that I compare many attributes of those two persons, not just the name, this is why I want to it be with directive and not with ngIf, ngStyle is also not the solution for me because there is more changes than just on the input itself.
Thank you very much for you help!

Answer 1

Only for style you can use ng-class directive.
<input ng-model="'firstPerson.name" ng-class="{ 'error':'secondPerson.name!='firstPerson.name' && secondPersonNameExist()"></input>
$scope.secondPersonNameExist = function () {
return angular.isDefined($scope.secondPerson.name);
}
Check this fiddle
Note that the class that you see is the previous so when the validation is clean you see error and on the next change you see the error absent. This is due to ng-change function is not picking up the new class status of input.