Директива AngularJS условно основана на переменной контроллера

Question

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

app.directive('invalid', function ($compile) { 
    return { 
     scope: true, 
     restrict: 'A', 
     link: function link(scope, element) { 
      element.bind('submit', function(){ 
       var text = '<div class="uk-alert uk-alert-danger" ng-if="invalidCredentials"><p>Invalid username or password</p></div>'; 
       el = $compile(text)(scope); 
       element.append(el); 
      }); 
     } 
    } 
}); 

(обратите внимание на ng-if на приложенном элемент)
я применил эту директиву form элемента следующим образом:
<form invalid name="loginForm" ng-submit="loginUser(loginDetails);" novalidate>

Всякий раз, когда учетные данные пользователя недействительны (проверяется через запрос, сделанный на сервер), переменная $scope.invalidCredentials установлена ​​в true (внутри глобального контроллера).

Он работает нормально, за исключением того факта, что директива запускается каждый раз при отправке формы. [Независимо от значения $scope.invalidCredentials]. ng-if, похоже, не работает.

Пожалуйста, помогите. Заранее спасибо

Answer 1

Вы использовали element.bind('submit', function() { ... }, поэтому функция будет вызываться каждый раз при отправке формы.

В этой функции мы скомпилируем и добавим HTML как есть, независимо от из ng-if в нем. То, что вы хотите сделать, это отказаться от директивы как @omri сказал, и поставить HTML-код в виде, например, так:

<form name="loginForm" ng-submit="loginUser(loginDetails);" novalidate> 
    ... 
    <div class="uk-alert uk-alert-danger" ng-if="invalidCredentials"> 
     <p>Invalid username or password</p> 
    </div> 
</form> 

Теперь <div> покажет, когда invalidCredentials верно.

Примечание: Используйте директивы, если у вас есть манипуляция с DOM на элементе или когда элемент несколько раз появляется в вашем коде. В вашем примере я предполагаю, что мы будем использовать этот раздел только один раз (на вашей странице входа), поэтому нет необходимости в директиве.

Answer 2

Можете ли вы сделать что-то подобное вместо этого?

 element.bind('submit', function(){ 
      if(scope.invalidCredentials){ 
      var text = '<div class="uk-alert uk-alert-danger"><p>Invalid username or password</p></div>'; 
      el = $compile(text)(scope); 
      element.append(el); 
      } 
     });