0

对于我正在处理的项目，我有一个非常简单的对话框，可以将自定义员工添加到业务应用程序中。模态本身并没有什么特别之处——名字、姓氏、OK、Cancel。容易……对吧？

然而，其中一项业务规则是我们不允许提交重复的员工。为此，我实现了以下角度指令：

(function() {
    'use strict';

    angular.module('app').directive('checkDuplicateEmployee', ['$q', 'officesSvc', 'webDataSvc', directive]);

    function directive($q, officesSvc, webDataSvc) {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function(scope, elem, attrs, vm) {
                vm.$asyncValidators.duplicateEmployee = function (modelValue, viewValue) {
                    // Problem visible here!
                    var args = {
                        officeType: officesSvc.officeType,
                        officeName: officesSvc.selectedOffice.name,
                        firstName: scope.vm.firstName,
                        lastName: scope.vm.lastName
                    };

                    // Custom wrapper for $http.
                    return webDataSvc.get('/api/admin/DoesEmployeeExist', args)
                        .then(function(results) {
                            if (results === true)
                                deferred.reject(results);

                                return true;
                            });
                };
            }
        }
    }
})();

我遇到的问题是，当我将指令添加到输入时......

<input type="text" id="firstName" name="firstName"
       maxlength="35"
       ng-model="vm.firstName"
       required check-duplicate-employee />

我输入了一些东西，发送到服务器的状态是我按键之前的状态。

Field:      | vm.firstName:      
----------------------------
T           |
Te          | T
Tes         | Te
Test        | Tes

因此，我可以由此推断，直到验证运行之后，范围才会更新。

问题：如何在$scope.vm对象更新后进行异步验证？请记住，我不能只将 传递viewValue给firstNameargs 列表中的属性 - 我对vm.firstName和vm.lastName属性的输入进行了相同的验证！

4

1 回答 1

0

幸运的是，有一种方法可以获取视图值！

角度形式验证的工作方式是将事物粘在范围上。卡在作用域上的东西包括controllerAs别名，还有form对象。假设我已将表单命名为employeeModal，这意味着我可以link(scope)通过调用从函数访问它scope.employeeForm。

表单具有添加它们的每个命名输入的属性（例如scope.employeeForm.firstName）。而且，它们有一个$viewValue属性，可以让您与视图值进行交互。

因此，需要对指令进行一些细微的修改。具体来说，需要 A) 找到表单对象的名称，然后 B) 将范围向下爬到所需元素的$viewValue，并将其添加到远程验证的参数中。

link: function(scope, elem, attrs, vm) {
    var formName = $(elme).parents('form').attr('name');

    vm.$asyncValidators.duplicateEmployee = function () {
        var args = {
            officeType: officesSvc.officeType,
            officeName: officesSvc.officeName,
            firstName: scope[formName].firstName.$viewValue,
            lastName: scope[formName].lastName.$viewValue
        };

        // Make remote validation call.
    };
}
于 2015-04-17T15:51:49.873 回答