AngularJS 1.6 and non-Angular event handler

Question

Использование AngularJS 1.6 и braintree-web 3.6.2 Hosted Fields. Я завернул обратные вызовы Braintree в обещаниях с использованием $ q (хотя новый Promise() отлично работает). Прямо сейчас, я имитирую $ scope. $ Apply() используя $ 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

Если Угловая служба обертывает код, который использует, например, события DOM, то ответственность за обслуживание должна зависеть от цикла обслуживания (при необходимости).

Использование $apply/$digest по-прежнему является правильным способом для этого.

Услуга может просто ввести $rootScope и обернуть функциональность обработчика событий в звонок по номеру $apply, оставив его черным для пользователей.

Альтернатива заключается в том, чтобы потребовать от пользователя услуги передать область действия и вместо этого позвонить $digest, что ограничит количество обработанных наблюдателей. На мой взгляд, однако, увеличение (скорее всего, незначительное) производительности от этого не будет стоить дополнительной сложности.

В то время как $timeout также является возможностью, он просто отложил бы выполнение без необходимости и в конце концов позвонил $apply на $rootScope в любом случае.