angularjs保存更改消化完成后 [英] angularjs save changes after digest has finished

问题描述

我认为这可能是相当普遍的用例与任何角度应用。我只是看在我的范围，某些对象被改变几个周期摘要的一部分。消化他们（通过绑定改变它们的值）结束后，我想将它们保存到DATABSE。

一个。现在，随着当前的解决方案我看到以下问题：

1. 在$超时运行的保存（） - 如何确保保存时才会调用
   一旦




2. 在运行范围$自定义函数$ evalAsync - 如何找出已经chaged

有当然的解决方案，这两个prolblems的，​​但那些非我知道好像ehough优雅的给我。

现在的问题是：什么是最优雅的解决问题的办法

乙。特别是，有什么办法

的最佳实践

1. 确保保存在一个周期摘要被调用一次




2. 找出对象的脏的最后消化后

解决方案

下面是一个解决方案，我发现工作最适合我 - 作为AMD MODUL。用下划线启发。

  / **
     *服务功能，有助于避免多次调用
     *一个函数的过程中消化角进程（通常是（）保存）。
     * $应用过程将原来的函数返回后调用;
     * /
        定义（['应用']，功能（应用程序）{
            app.factory（'反跳'，['$超时'，函数（$超时）{
                复位功能（FN）{//去抖FN
                    变种nthCall = 0;
                    复位功能（）{//拦截FN
                        VAR认为这=;
                        VAR argz =参数;
                        nthCall ++;
                        VAR后来=（函数（版本）{
                            返回功能（）{
                                如果（版本=== nthCall）{
                                    返回fn.apply（即，argz）;
                                }
                            };
                        }）（nthCall）;
                        返回$超时（后来，0，真正的）;
                    };
                };
            }]）;
        }）;
    / ******** /    //使用方法如下：    $范围。$腕表（'秩序'，函数（newOrder）{
      $ scope.orderRules.apply（newOrder）; //订单更改属性
    }，真正的）;    $范围。$腕表（'order.valid'，函数（newOrder）{
      $ scope.save（newOrder）; //将被多次调用，同时通过角消化
    }）;    $ scope.save =防抖动（功能（顺序）{
      //这里... $ HTTP POST订单....
      //防抖动（）将确保保存（）将会被调用一次
    }）;
 

I think this might be quite common use-case with any angular app. I am simply watching some objects on my scope that are changed as part of several digest cycles. After digesting them (changing their values via databinding) has finished, I want to save them to databse.

A. Now, with the current solutions I see following problems:

1. running save in $timeout() - how to assure that save is called only once

2. running a custom function in $scope.$evalAsync - how to find out what has been chaged

There are of course solutions to both of these prolblems, but non of those I know seem ehough elegant to me.

The question is: What is the most elegant solution to the problem?

B. In particular, what are the best practices to

1. make sure that save gets called only once in a digest cycle

2. find out that object is dirty after last digest

解决方案

Here is a solution I've found working best for me - as an AMD modul. Inspired by Underscore.

   /**
     * Service function that helps to avoid multiple calls 
     * of a function (typically save()) during angular digest process.
     * $apply will be called after original function returns;
     */
        define(['app'], function (app) {
            app.factory('debounce', ['$timeout', function ($timeout) {
                return function(fn){ // debounce fn
                    var nthCall = 0;
                    return function(){ // intercepting fn
                        var that = this;
                        var argz = arguments;
                        nthCall++;
                        var later = (function(version){
                            return function(){
                                if (version === nthCall){
                                    return fn.apply(that, argz);
                                }
                            };
                        })(nthCall);
                        return $timeout(later,0, true);
                    };
                };
            }]);
        });


    /*************************/

    //Use it like this: 

    $scope.$watch('order', function(newOrder){
      $scope.orderRules.apply(newOrder); // changing properties on order
    }, true);

    $scope.$watch('order.valid', function(newOrder){
      $scope.save(newOrder); //will be called multiple times while digested by angular
    });

    $scope.save = debounce(function(order){
      // POST your order here ...$http....
      // debounce() will make sure save() will be called only once
    });

这篇关于angularjs保存更改消化完成后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！