Как условно применять атрибут в угловом?

Question

У меня есть эта проблема: Я хочу сравнить переменную с входом ngModel. Я делаю это с директивой:

сайтов:

<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 директива костюм, который требует ngModel, ограничить 'A' и установить справедливость на входе основанный на сравнении значений. Он отлично работает - если имя firstPerson.name не равно secondPerson.name, граница ввода красная.

Но! В случае, если в сфере видимости нет secondPerson, я не хочу, чтобы атрибут, похожий на человека, отображался в html. Я попытался использовать ng-attr, но он не работает. В текущем сценарии, если secondPerson не существует, значение secondPerson.name в директиве является пустой строкой.

Обратите внимание, что в случае, если существует второй оператор, но имя "" Я все еще хочу показать красный ввод. В дополнение к этому я сравниваю многие атрибуты этих двух лиц, а не только имя, поэтому я хочу, чтобы это было с директивой, а не с ngIf, ngStyle также не является решением для меня, потому что есть больше изменений, чем просто на сам вход.

Большое спасибо за помощь!

Answer 1

Только для стиля вы можете использовать директиву ng-class.

<input ng-model="'firstPerson.name" ng-class="{ 'error':'secondPerson.name!='firstPerson.name' && secondPersonNameExist()"></input> 

$scope.secondPersonNameExist = function() { 
    return angular.isDefined($scope.secondPerson.name); 
} 

Проверить это fiddle Обратите внимание, что класс, который вы видите предыдущий поэтому, когда проверка чист вы видите сообщение об ошибке, и на следующем изменении вы видите ошибка отсутствует. Это связано с тем, что функция ng-change не поднимает статус нового класса ввода.