ng-class 不在用于表单验证的指令内工作答案

【问题标题】：ng-class not working inside directive for form validationng-class 不在用于表单验证的指令内工作
【发布时间】：2015-02-05 16:32:44
【问题描述】：

我有一个表格，里面有一个这样的指令： addEditUser.html:

    <form role="form" class="form-horizontal" novalidate name="addEditUserForm" >
        <div class="form-group labelInputContainer">
            <label for="emailAddr" class="col-xs-1 col-sm-1 col-md-1 control-label">E-mail</label>
            <div class="col-xs-8 col-sm-8 col-md-8">
                <input type="text" ng-class="{'invalid': addEditUserForm.emailAddr.$error.required}" maxlength="100" class="form-control" id="emailAddr" name="emailAddr" placeholder="E-mail" ng-model="user.emailAddr" required />
            </div>
        </div>
        <address default-addr="defaultAddr" />
        <button type="submit" class="btn greenButton" style="width: 100%;" ng-click="saveUser();" data-ng-disabled="addEditUserForm.$invalid">SAVE</button>
    </form>

addEditUserController.js

    app.controller('addEditUserController', function ($scope, $routeParams, $location, $filter, reposSvc) {
         $scope.defaultAddr = {};
         var id = $routeParams.id;
         if (id) {
             $scope.user = reposSvc.user.get({ id: id },
                function (data) {
                    $scope.defaultAddr = data.defaultAddr;
              });
    });

指令 HTML (address.html)：

<div>
    <div class="form-group labelInputContainer">
        <label for="streetAddress" class="col-xs-2 col-sm-2 col-md-2 control-label">Street</label>
        <div class="col-xs-3 col-sm-3 col-md-3">
            <input type="text" ng-class="{'invalid': addEditUserForm.streetAddress.$error.required}" maxlength="100" class="form-control noLimitsTextBox" id="streetAddress" name="streetAddress" ng-model="defaultAddr.streetAddress" placeholder="Street" required />
        </div>
        <label for="no" class="col-xs-2 col-sm-2 col-md-2 control-label">No</label>
        <div class="col-xs-3 col-sm-3 col-md-3">
            <input type="text" maxlength="6" class="form-control" id="no" name="no" placeholder="No" />
        </div>
    </div>
</div>

address.js:

(function () {
    'use strict';

    app.directive('address', function () {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: 'app/directives/address.html',
            scope: {
                defaultAddr: '='
            },
            controller: function ($scope, reposSvc, toastr) {

            }
        };
    });
})();

在我填写所有必填字段（在此简短示例中为电子邮件和街道）之前，该按钮处于禁用状态。但只有电子邮件才会应用“无效”类（背景颜色）。因此，验证主要适用于两个控件，但 ng-class 仅应用于主 html 中的电子邮件字段。我究竟做错了什么？我怎样才能从 ng-class 获得“无效”类也应用于指令控件？

【问题讨论】：

标签： angularjs

【解决方案1】：

原因是因为你的指令是隔离作用域的（它不会自动从父级继承），所以它没有得到作为属性添加到作用域上的特殊表单对象，它具有属性的名称。因此，您需要将其作为 2 路绑定传递，或者使用 $parent.addEditUserForm 来访问它，这似乎很糟糕（影响可重用性），或者只使用 scope:true 但它可能无法满足您使用隔离的意图范围。验证有效，因为您的 ng-model 位于 2-way bound 属性 ng-model="defaultAddr.streetAddress" 上，该属性仍附加到 formcontroller 实例。

所以你可以这样做：

return {
        restrict: 'E',
        replace: true,
        templateUrl: 'app/directives/address.html',
        scope: {
            defaultAddr: '=',
            form:'=' //<-- Add a binding
        },
        controller: function ($scope, reposSvc, toastr) {

        }
    };

和

  <input type="text" ng-class="{'invalid': form.streetAddress.$error.required}" maxlength="100" class="form-control noLimitsTextBox" id="streetAddress" name="streetAddress" ng-model="defaultAddr.streetAddress" placeholder="Street" required />

并将其传递为：

 <address default-addr="defaultAddr" form="addEditUserForm" />

注意：我在 2-way 绑定中使用了 form 的名称，这样它就不会与特定的表单名称紧密耦合，并且更可重用。

或者作为其他选项而不是使用ng-class设置类，只需使用ng-invalid、ng-invalid-required等。当元素无效时添加到元素上的类。

【讨论】：