Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了触发自定义验证指令后,AngularJS ng-model值将丢失大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我创建了一个自定义验证指令并在表单中使用它.它可以毫无问题地触发,但在触发验证后,我发现模型值刚刚丢失.说我有

ng-model="project.key"

并且在验证之后,project.key不再存在于范围中.我想某种程度上我理解AngularJS错了并做错了什么.

代码说话.

这是我的html页面

<div class="container">
    ...
    <div class="form-group"
            ng-class="{'has-error': form.key.$invalid && form.key.$dirty}">
            <label for="key" class="col-sm-2 control-label">Key</label>
            <div class="col-sm-10">
                <input type="text" class="form-control text-uppercase" name="key"
                    ng-model="project.key" ng-model-options="{ debounce: 700 }"
                    placeholder="unique key used in url"
                    my-uniquekey="vcs.stream.isProjectKeyValid" @L_618_5@ />
                <div ng-messages="form.key.$error" ng-if="form.key.$dirty"
                    class="Help-block">
                    <div ng-message="@L_618_5@">Project key is @L_618_5@.</div>
                    <div ng-message="loading">checking if key is valid...</div>
                    <div ng-message="keyTaken">Project key already in use,please
                        use another one.</div>
                </div>
            </div>
        </div>
    <div class="col-sm-offset-5 col-sm-10">
        <br> <a href="#/" class="btn">Cancel</a>
        <button ng-click="save()" ng-disabled="form.$invalid"
            class="btn btn-priMary">Save</button>
        <button ng-click="destroy()" ng-show="project.$key"
            class="btn btn-danger">delete</button>
    </div>
</form>

这是我的指示:

.directive('myUniquekey',function($http) {
        return {
            reStrict : 'A',require : 'ngModel',link : function(scope,elem,attrs,ctrl) {
                var requestTypeValue = attrs.myUniquekey;

                ctrl.$parserS.Unshift(function(viewvalue) {
                    // if (viewValue == undefined || viewValue == null
                    // || viewValue == "") {
                    // ctrl.$SETVALidity('@L_618_5@',falsE);
                    // } else {
                    // ctrl.$SETVALidity('@L_618_5@',truE);
                    // }

                    setAsLoading(true);
                    setAsValid(false);

                    $http.get('/prism-cmti/2.1',{
                        params : {
                            requestType : requestTypeValue,projectKey : viewValue.toUpperCase()
                        }
                    }).success(function(data) {
                        var isValid = data.isValid;
                        if (isValid) {
                            setAsLoading(false);
                            setAsValid(true);

                        } else {
                            setAsLoading(false);
                            setAsValid(false);
                        }
                    });

                    return viewValue;
                });

                function setAsLoading(bool) {
                    ctrl.$SETVALidity('loading',!bool);
                }

                function setAsValid(bool) {
                    ctrl.$SETVALidity('keyTaken',bool);
                }

            }
        };
    });

这是表单页面的控制器:

angular.module('psm3App').controller(
        'ProjectCreateCtrl',[ '$scope','$http','$routeParams','$LOCATIOn',function($scope,$http,$routeParams,$LOCATIOn) {
                    $scope.save = function() {
                            $http.post('/prism-cmti/2.1',{requestType:'vcs.stream.addProject',project:$scope.project})
                            .success(function(data) {
                                $LOCATIOn.path("/");
                            });
                        };
                }]);

在此错误之前,我需要以某种方式在自定义验证指令中处理所需的验证,如果我不这样做,则必需的验证会出错.现在我想到了,也许这两个问题的根本原因是相同的:模型值在我的指令链接功能被触发后消失了.

我正在使用Angular1.3 Beta 18 BTW.

任何帮助表示赞赏.提前致谢.

更新:
跟着@ ClarkPan的回答,我更新了我的代码,立即在ctrl.$parserS.Unshift()中返回viewValue,这使得所需的验证现在运行良好,所以我不再需要下面的行了.

// if (viewValue == undefined || viewValue == null
                    // || viewValue == "") {
                    // ctrl.$SETVALidity('@L_618_5@',truE);
                    // }

但是{{project.key}}仍然没有得到更新.
然后我试在这里注释掉这两行:

setAsLoading(true);
                    setAsValid(false);

模型值{{project.key}}已更新.我知道如果任何验证失败,模型值将被清除,但我想

function(data) {
                            var isValid = data.isValid;
                            if (isValid) {
                                setAsLoading(false);
                                setAsValid(true);
                            } else {
                                setAsLoading(false);
                                setAsValid(false);
                            }
                        }

在$http.get(…).success()应该在$digest循环中执行,这意味着应该更新模型值.

怎么了?

解决方法

发生这种情况是因为如果模型中设置了任何无效标志,则angular不会对范围和$modelValue应用任何更改.当您开始验证过程时,您将’keyTaken’有效性标志设置为false.这告诉角度不要将值应用于模型.当ajax响应到来并且你将’keyTaken’有效性标志设置为true时,$modelValue已经设置为undefined并且属性’key’消失了.尝试在ajax请求期间将所有有效性标志设置为true.您必须避免在ajax调用之前调用setAsLoading(true)和setAsValid(false)并将所有有效性标志设置为true.只有在ajax响应后才设置有效性标志.

大佬总结

以上是大佬教程为你收集整理的触发自定义验证指令后,AngularJS ng-model值将丢失全部内容,希望文章能够帮你解决触发自定义验证指令后,AngularJS ng-model值将丢失所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。