为什么ng-show无法根据表达式显示或隐藏我的元素？

Question

I have:

<span class="inlineBlock fa fa-question-circle"
      ng-show="!(validateEmail(ahs.forms.modal.modalUserEmail)=='OK')"
      title="{{ validateEmail(ahs.forms.modal.modalUserEmail) }}">{{ validateEmail(ahs.forms.modal.modalUserEmail) }}</span>

The value of validateEmail is set with the following:

    $scope.validateEmail = function (error) {
        if (error.$error) {
            if (error.$error.required) return "Required";
            if (error.$error.email) return "Email Invalid";
        } 
        return "OK";
    }

But even when it returns OK then the show is still showing the fa-question-circle icon with the word OK next to it. Note that I have tried several different combinations of parenthesis and I always see either the words Required, Email Invalid or OK. I never see the word not showing.

Answer 1

我唯一的猜测是inlineBlock类将覆盖display CSS属性，在删除该类之后是否还会发生？

Answer 2

Your code works fine "as is" if ahs.forms.modal.modalUserEmail is what it should be, but fails if it is not, and here's the JSFiddle to prove it.

I copy/pasted your code and just added the required objects that you left out from your question.

Did you check the console for errors? Angular gets very upset if for example ahs.forms.modal.modalUserEmail should happen to be null .

Answer 3

Now I know what is happening. You should pass the input to the validateEmail function in order to check if it contains a valid value. So, try this:

<form name="form" >
    <input type="email" name="emailField" ng-model="ahs.forms.modal.modalUserEmail"/>
    <span class="inlineBlock fa fa-question-circle" ng-show="validateEmail(form.emailField) != 'OK'"></span>
</form>