angularjs 다이제스트가 끝난 후 변경 사항을 저장하십시오.

Question

각도 응용 프로그램에서 상당히 일반적인 사용 사례 일 수 있습니다. 몇 가지 다이제스트주기의 일부로 변경되는 일부 범위의 객체를 보는 것입니다. 데이터 바인딩을 통해 값을 변경 한 후 데이터 항목을 소화 한 후 데이터베이스에 저장하려고합니다. 나는 다음과 같은 문제가 볼 수있는 현재의 솔루션으로 이제

A. :() $ 시간 제한에 저장 실행

1. 을 - 보장하는 방법을 그

2. 사용자 정의를 실행에만 일단라고 저장 $ scope에있는 함수 $ evalAsync - chaged 된 것을 알아내는 방법

물론이 두 가지 문제에 대한 해결책은 있지만, 내가 아는 사람들은 나에게 우아하게 느껴진다.

질문 : 문제에 대한 가장 우아한 해결책은 무엇입니까? 특히

B.,

에 가장 좋은 방법은

1. 는 다이제스트주기에 한 번만 호출되는 저장

2. 이 지난 후 더러운을 해당 객체입니다 알아 있는지 확인 무엇인가 다이제스트

Answer 1

다음은 AMD modul로서 가장 잘 작동하는 해결책입니다. 언더 코어 (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 
    });