Question

我在创建新用户时检查用户名是否已存在。我也希望能够编辑用户，而我实际上正在使用相同的表单。当表单处于编辑模式时，您不能更改用户名，并且将禁用输入字段。

我有一个指令，如果用户名是唯一的，则检查数据库，并验证或使输入无效。当表单处于编辑模式时，不应触发此指令，因为不允许编辑用户名，并且表单应该验证。

<input name="alias" 
    class="form-control" 
    type="text" 
    ng-model="user.alias" 
    required
    ng-model-options="{ debounce: { default : 500, blur: 0 }}" 
    validate-alias="{{formMode == 'new' ? true : false}}" 
    />

指令：

.directive('validateAlias', function($http, $q) {
        return {
            restrict: 'A',
            require: 'ngModel',
            validateAlias: '=',
            link: function(scope, element, attrs, ngModel) {
                attrs.$observe('validateAlias', function(){
                    console.log("validateAlias: " + attrs.validateAlias + ", which is a " + typeof attrs.validateAlias);
                    //this returns "validateAlias: false, which is a string"

                    if (attrs.validateAlias === 'true') console.log("should work"); else console.log("n/a");
                    //this returns "should work"    

                    if (attrs.validateAlias === 'true') {
                        ngModel.$asyncValidators.username = function (alias) {
                            return $http.get(aliasurl + alias).then(
                                function (response) {
                                    if (response.data.length > 0) {
                                        return $q.reject('Username not unique');
                                    } else {
                                        return $q.resolve();
                                    }
                                }
                            );
                        };
                    }
                });
            }
        };
    })

所以会发生在编辑模式中，第一个if语句返回我期望的内容（false，也就是说不验证，DOM中的属性与此匹配，显示validate-alias =＆＃39; false＆＃ 39;），但仍然使用数据库检查用户名。我在新模式下一切正常，但这可能只是巧合，而不是因为代码可以正常工作。

我做错了什么，但我无法弄明白......！

编辑：

是的，我已经改变了一些东西。我现在有以下指令：

.directive('validateAlias', function($http, $q) {
        return {
            restrict: 'A',
            scope: {
                validateAlias: '@'
            },
            link: function(scope, element, attrs) {
                scope.$watch(attrs.validateAlias, function(v){
                    console.log("validateAlias: " + v + ", which is a " + typeof v);
                    if (v === true) console.log("the check is active"); else console.log("the check is NOT active");
                    if (v === true) {
                        ngModel.$asyncValidators.username = function (alias) {
                            return $http.get(aliasurl + alias).then(
                                function (response) {
                                    if (response.data.length > 0) {
                                        return $q.reject('Username not unique');
                                    } else {
                                        return $q.resolve();
                                    }
                                }
                            );
                        };
                    }
                });
            }
        };
    })

现在$ watch似乎不起作用......我错过了什么？

最终编辑：

DOM有一个设置变量＆＃34; false＆＃34;对于我制作的属性......手表工作正常，但DOM生成了一次，所以没有什么值得关注的。

幸运的是，每次属性改变时，我都可以重新加载DOM（虚拟切换屏幕），因此范围再次读取属性，并传递变量，使指令完全符合我的要求。我在第一次编辑后发布的代码就是我使用的代码。

我不确定这是否是Angular方式，但它现在有效。当我找到更好的解决方案时，我会更新代码。

Answer 1

试试这个： -

.directive('validateAlias', function($http, $q) {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
               validateAlias: '=',
            }
            link: function(scope, element, attrs, ngModel) {
                scope.$watch('validateAlias', function(watchData){
                    console.log("validateAlias: " + watchData + ", which is a " + typeof watchData);

                    if (watchData === 'true') console.log("should work"); else console.log("n/a");
                    //this returns "should work"    

                    if (watchData.value === 'true') {
                        ngModel.$asyncValidators.username = function (alias) {
                            return $http.get(aliasurl + alias).then(
                                function (response) {
                                    if (response.data.length > 0) {
                                        return $q.reject('Username not unique');
                                    } else {
                                        return $q.resolve();
                                    }
                                }
                            );
                        };
                    }
                });
            }
        };
})

使用角度指令激活或停用对服务的调用

编辑：

最终编辑：

1 个答案: