我的目标是在有效后自动保存表单并使用超时对其进行更新。我设置为:
(function(window, angular, undefined) { 'use strict'; angular.module('nodblog.api.article', ['restangular']) .config(function (RestangularProvider) { RestangularProvider.setBaseUrl('/api'); RestangularProvider.setRestangularFields({ id: "_id" }); RestangularProvider.setRequestInterceptor(function(elem, operation, what) { if (operation === 'put') { elem._id = undefined; return elem; } return elem; }); }) .provider('Article', function() { this.$get = function(Restangular) { function ngArticle() {}; ngArticle.prototype.articles = Restangular.all('articles'); ngArticle.prototype.one = function(id) { return Restangular.one('articles', id).get(); }; ngArticle.prototype.all = function() { return this.articles.getList(); }; ngArticle.prototype.store = function(data) { return this.articles.post(data); }; ngArticle.prototype.copy = function(original) { return Restangular.copy(original); }; return new ngArticle; } }) })(window, angular); angular.module('nodblog',['nodblog.route']) .directive("autosaveForm", function($timeout,Article) { return { restrict: "A", link: function (scope, element, attrs) { var id = null; scope.$watch('form.$valid', function(validity) { if(validity){ Article.store(scope.article).then( function(data) { scope.article = Article.copy(data); _autosave(); }, function error(reason) { throw new Error(reason); } ); } }) function _autosave(){ scope.article.put().then( function() { $timeout(_autosave, 5000); }, function error(reason) { throw new Error(reason); } ); } } } }) .controller('CreateCtrl', function ($scope,$location,Article) { $scope.article = {}; $scope.save = function(){ if(typeof $scope.article.put === 'function'){ $scope.article.put().then(function() { return $location.path('/blog'); }); } else{ Article.store($scope.article).then( function(data) { return $location.path('/blog'); }, function error(reason) { throw new Error(reason); } ); } }; })
我想知道是否有最佳方法。
查看代码,我可以看到,如果当前输入有效,并且用户也更改了任何有效的值,则不会重新触发$ watch。这是因为监视功能仅在值更改时才执行。您还应该检查表单的脏状态,并在持久保存表单数据时将其重置,否则会出现无休止的持久循环。
而且您不清除以前的任何超时。
如果当前超时正在进行,则当前代码将保存无效数据。
我采用了一条指令,该指令可以完成所有这些工作,并具有更好的SOC,因此可以重复使用。只需为其提供一个回调表达式,就可以了。
看到它在这个矮人的行动。
演示控制器
myApp.controller('MyController', function($scope) { $scope.form = { state: {}, data: {} }; $scope.saveForm = function() { console.log('Saving form data ...', $scope.form.data); }; });
演示HTML
<div ng-controller="MyController"> <form name="form.state" auto-save-form="saveForm()"> <div> <label>Numbers only</label> <input name="text" ng-model="form.data.text" ng-pattern="/^\d+$/"/> </div> <span ng-if="form.state.$dirty && form.state.$valid">Updating ...</span> </form> </div>
指示
myApp.directive('autoSaveForm', function($timeout) { return { require: ['^form'], link: function($scope, $element, $attrs, $ctrls) { var $formCtrl = $ctrls[0]; var savePromise = null; var expression = $attrs.autoSaveForm || 'true'; $scope.$watch(function() { if($formCtrl.$valid && $formCtrl.$dirty) { if(savePromise) { $timeout.cancel(savePromise); } savePromise = $timeout(function() { savePromise = null; // Still valid? if($formCtrl.$valid) { if($scope.$eval(expression) !== false) { console.log('Form data persisted -- setting prestine flag'); $formCtrl.$setPristine(); } } }, 500); } }); } }; });