Как избежать задержки цикла дайджеста от двусторонней привязки - PullRequest
Новая
       19

Как избежать задержки цикла дайджеста от двусторонней привязки

1 голос
/ 03 апреля 2019

Angularjs, когда запускается двусторонняя привязка данных?

В приложении AngularJS у меня есть директива parent и дочерняя директива.

parentDirective 

angular
  .module('myApp')
  .directive('customForm', function(customService, apiV1, Constants, $timeout) {
    return {
      restrict: 'E',
      scope: {
        param1: '=',
        param2: '=?',
        boolean1: '@?'
      },
      template,
      link: function(scope, parentController) {
      scope.data = customService.newClient;
      //some stuff...

childDirective JS: 

angular
  .module('myApp')
  .directive('customToolForm', function () {
    return {
      restrict: 'E',
      scope: {
        name: '=',
        city: '=',
        postalCode: '='
      },
      template,
      controller: function ($scope, $rootScope, Constants, apiV1, customService) {

     $scope.doSomethingWithPostalCode = function() {
         $scope.$parent.doSomethingWithPostalCode();
     }
     //some stuff...

фрагмент HTML parentDirective: 

<address-client-creation name="data.client.name" city="data.client.city"
                         postal-code="data.client.postalCode">
</address-client-creation>

фрагмент HTML childDirective: 

 <input maxlength="5" type="text" data-ng-model="postalCode"
        data-ng-change="doSomethingWithPostalCode();">

У меня проблема в том, что:

Когдаметод doSomethingWithPostalCode запускается из childDirective, значение postalCode в дочернем элементе не совпадает с client.postalCode родительского элемента, но в конце метода оно равно.

похоже, что после вызова функции происходит событие двустороннего связывания, которое обновляет родительское значениеметод?

Ответы [ 2 ]

1 голос
/ 03 апреля 2019

Как избежать задержки цикла дайджеста из-за двусторонней привязки

Платформа AngularJS реализует двустороннюю ('=') привязку путем добавления наблюдателя в дочернюю область, который передает данные из дочерней области вродительская область.Наблюдателю требуется цикл дайджеста, чтобы обнаружить изменение и выполнить передачу.

Более современный подход заключается в использовании односторонней ("<") привязки для входов и привязки выражений ("&") для выходов:

app.directive('customToolForm', function () {
    return {
      restrict: 'E',
      scope: {
        name: '<',
        city: '<',
        ̶p̶o̶s̶t̶a̶l̶C̶o̶d̶e̶:̶ ̶'̶=̶'̶
        postalCode: '<',
        postalCodeChange: '&',
      },
      template: `
          <input maxlength="5" type="text" data-ng-model="postalCode"
                 data-ng-change="doSomethingWithPostalCode(postalCode);">
      `,
      controller: function ($scope, $rootScope, Constants, apiV1, customService) {

     $scope.doSomethingWithPostalCode = function(postalCode) {
         ̶$̶s̶c̶o̶p̶e̶.̶$̶p̶a̶r̶e̶n̶t̶.̶d̶o̶S̶o̶m̶e̶t̶h̶i̶n̶g̶W̶i̶t̶h̶P̶o̶s̶t̶a̶l̶C̶o̶d̶e̶(̶)̶;̶
         $scope.postalCodeChange({$event: postalCode});
     }
     //some stuff...

Использование: 

<custom-form-tool 
    name="data.client.name" city="data.client.city"
    postal-code="data.client.postalCode"
    postal-code-change="data.client.postalCode=$event; doSomething($event)"
>
</custom-form-tool>

Использование привязки выражения ("&") немедленно делает данные события доступными для родительского контроллера.

Это также делает миграциюболее простой путь к Angular 2+.

Для получения дополнительной информации см.

0 голосов
/ 03 апреля 2019

Я нашел решение использовать $watch в childDirective : 

    /**
     * Using $watch instead of data-ng-change ensure that bindings are updated
     */
    $scope.$watch('postalCode', function() {
       $scope.$parent.doSomethingWithPostalCode();
    });

И так, удалив the data-ng-change на входе дочерней директивы: 

 <input maxlength="5" type="text" data-ng-model="postalCode">

При отладке внутри метода $ watch я мог убедиться, что родительский $ scope уже обновлен.

Не уверен, что это реальное решение или больше похоже на взлом.

...