ng-disable在我尝试使用自定义指令时不起作用

如何解决ng-disable在我尝试使用自定义指令时不起作用

我正在学习AngularJS。我正在尝试制定一个自定义指令，以检查电子邮件是否已经存在。我从拥有9个用户的数组中获取电子邮件，并且可以使用Factory成功获取它们。我的自定义指令的问题是，无论我输入什么输入按钮，都会被禁用。该指令的想法是，当我失去重点时，它将检查电子邮件是否存在，如果不存在，则将禁用按钮；如果不存在，则将启用按钮。

.directive("registerUser",function(){
                            return {
                             
                                link:function($scope,element) {
                                    element.bind('blur',function () {
                                        var emailInput = element.val();
                                        var flag = "false";
                                        $scope.registeredUsers.forEach(element => {
                                            if(emailInput === element.email){
                                               flag = "true";
                                               console.log(emailInput);
                                               console.log(flag);
                                               return;
                                            }
                                        });
                                        $scope.invalidemail = flag;

                                    });}
                           }
                         })

这是我的指令，您可以看到我尝试使用不起作用的标志，尝试将标志更改为仍然不起作用的布尔值，我还将显示我的HTML。我不确定var emailInput = email.val（）是否对我造成了问题，因为我没有使用ng-model。

<form action="">
    <input type="text" name="emailField" ng-model="emailInput" register-user>
    <input type="button" name="" value="check" ng-disabled= invalidemail>
</form>

那是我的HTML。注意：我不检查此任务中的电子邮件是否有效。我只是在检查电子邮件是否已经存在于我的数组中。

解决方法

将flag的值设置为"true"或"false"的字符串，而不是true或false的布尔值。

// not "false"
var flag = false;
// subsequently set it to true not "true"

您的表单模板在ng-disabled和绑定值之间有一个空格。

<input type="button" name="emailButton" value="check" ng-disabled="invalidemail" />

您也可以使用Array.some()来简化代码，以查看数组是否包含您的值。

const emailInput = element.val();
$scope.invalidemail = !$scope.registeredUsers.some(element => emailInput === element.email);