javascript - 在指令中访问 child 的 '$invalid' 验证 Prop

Question

我正在尝试创建一个可重复使用的指令，该指令将根据其中一个子元素的 $invalid 属性简单地将一个类添加到一个元素。

我开始创建指令，但不确定如何访问 $invalid 属性:

简化标记:

<form>
    <div class="group" ng-validate="emailAddress">
        <div class="wrapper">
            <input type="email" name="emailAddress" ng-model="emailAddress" required/>
        </div>
    </div>
</form>

指令:

function ngValidate ()
{
    function linkFunction (scope, element, attributes, controller)
    {
        var el = element[0];
        var targetElName = attributes.ngValidate;
        var $targetEl = angular.element(el.querySelector("[name='" + targetElName + "']"));

        $targetEl.on("blur", blurHandler);

        function blurHandler (event)
        {
            console.log($targetEl.$invalid); // always undefined??

            // what I want to happen (sudo code):

            // if $targetEl is $invalid then add class 'error' to element.
            // if $targetEl is $valid then add class 'success' to element.
        }
    }

    return {
        restrict: "A",
        link: linkFunction
    };
}

我对此有点困惑，所以我们将不胜感激。

Answer 1

感谢@Ghan 关于使用类名的建议，我现在创建了一个工作指令来封装逻辑:

标记示例(将值更改为“姓氏”以避免混淆):

<form>
    <div class="group" ng-validate="surname">
        <div class="wrapper">
            <input type="text" name="surname" ng-model="surname" required/>
        </div>
    </div>
</form>

工作指示:

function ngValidate ()
{
    function linkFunction (scope, element, attributes, controller)
    {
        var el = element[0]; // grab the DOM element from the angular/jQuery element.
        var targetElName = attributes.ngValidate;
        var $targetEl = angular.element(el.querySelector("[name='" + targetElName + "']"));

        $targetEl.on("blur", blurHandler);

        function blurHandler (event)
        {
            if ($targetEl.hasClass("ng-invalid"))
            {
                // add remove success class and error class.
                element.removeClass("form-controlGroup--success").addClass("form-controlGroup--error");
            }
            else if ($targetEl.hasClass("ng-valid"))
            {
                // add remove error class and success class.
                element.removeClass("form-controlGroup--error").addClass("form-controlGroup--success");
            }
        }
    }

    return {
        restrict: "A",
        link: linkFunction
    };
}