AngularJS 1.6 및 비 각도 이벤트 핸들러

Question

AngularJS 1.6 및 braintree-web 3.6.2 Hosted Fields 사용. $ q를 사용하여 약속에 Braintree 콜백 래핑했습니다 (비록 새로운 Promise() 잘 작동합니다). 지금, 나는 $ scope를 시뮬레이트하고있다. $ apply()는 time 매개 변수없이 timeout을 사용한다. 여기

내 서비스에 대한 클래스 ES6 코드의 조각이다 :.

'use strict'; 
import braintree from 'braintree-web'; 

export class Cart { 
    constructor($q, $log) { 
    this.$q = $q; 
    this.$log = $log; 
    } 

    // Handle the callback as a promise 
    braintreeHostedFieldsCreate(clientInstance) { 
    return this.$q((resolve, reject) => { 
     braintree.hostedFields.create({ 
     client: clientInstance, 
     fields: { 
      number: { 
      selector: '#card-number', 
      placeholder: '4111 1111 1111 1111' 
      }, 
      cvv: { 
      selector: '#cvv', 
      placeholder: '123' 
      }, 
      expirationDate: { 
      selector: '#expiration-date', 
      placeholder: '10/2019' 
      } 
     }, 
     styles: { 
      input: { 
      'font-size': '14px', 
      'font-family': 'Helvetica Neue, Helvetica, Arial, sans-serif', 
      color: '#555' 
      }, 
      ':focus': { 
      'border-color': '#66afe9' 
      }, 
      'input.invalid': { 
      color: 'red' 
      }, 
      'input.valid': { 
      color: 'green' 
      } 
     } 
     }, (hostedFieldsErr, hostedFieldsInstance) => { 
     // Make event handlers run digest cycle using $timeout (simulate $scope.apply()) 
     hostedFieldsInstance.on('blur', event => this.$timeout(() => event)); 
     hostedFieldsInstance.on('focus', event => this.$timeout(() => event)); 
     hostedFieldsInstance.on('validityChange', event => this.$timeout(() => event)); 
     hostedFieldsInstance.on('empty', event => this.$timeout(() => event)); 
     hostedFieldsInstance.on('notEmpty', event => this.$timeout(() => event)); 

     // Reject or resolve the promise 
     if(hostedFieldsErr) { 
      this.$log.error('Not able to create the hosted fields with Braintree.', hostedFieldsErr); 
      return reject(hostedFieldsErr); 
     } else { 
      this.hostedFieldsInstance = hostedFieldsInstance; 
      return resolve(hostedFieldsInstance); 
     } 
     }); 
    }); 
    } 

} 

이 상황에서 $ 범위에 대한 좋은 대체를 $ 제한 시간을 사용하고 $ AngularJS와 1.5 나타납니다 후 후자의 사용과 같은) (적용 낙심해야 할까?

Answer 1

Angular 서비스가 DOM 이벤트를 사용하는 코드를 래핑하는 경우, 필요한 경우 다이제스트 루프가 시작되었는지 서비스 책임자가해야합니다.

$apply/$digest을 사용하는 것은 여전히 ​​올바른 방법입니다.

서비스는 단순히 $rootScope을 삽입하고 $apply에 대한 호출에서 이벤트 처리기 기능을 래핑하여 사용자로부터 블랙 박스를 유지합니다.

대신 서비스 사용자에게 범위를 전달하도록 요청하고 $digest을 호출하면 처리되는 watcher의 양이 제한됩니다. 그러나 내 마음 속에서 (이럴 가능성이 거의없는) 성능 향상은 추가 된 복잡성의 가치가 없을 것입니다.

$timeout도 가능할 수 있지만, 불필요하게 실행을 연기하고 결국 $apply을 $rootScope에 호출합니다.