大佬教程收集整理的这篇文章主要介绍了触发自定义验证指令后,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循环中执行,这意味着应该更新模型值.
怎么了?
以上是大佬教程为你收集整理的触发自定义验证指令后,AngularJS ng-model值将丢失全部内容,希望文章能够帮你解决触发自定义验证指令后,AngularJS ng-model值将丢失所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。