Question

每当用户尝试通过不匹配的用户名和密码组合登录时，我都会显示有关无效登录凭据的错误消息（通过对服务器的请求，在此情况下返回无效登录详细信息的状态）。我已经为此创建了一个指令：

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
});

（注意附加元素上的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似乎无法运作。

请帮忙。提前致谢

Answer 1

您使用了element.bind('submit', function () { ... }，因此每次提交表单时都会调用该函数。

在我们编译的函数中，按原样附加HTML，无论}中的。您想要做的是放弃像@omri所说的指令，并将HTML代码放在表单中，如下所示：

ng-if

现在只要<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>就会显示。

注意：的在对元素进行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);
           }
        });

AngularJS指令有条件地基于控制器变量

2 个答案: