[Из песочницы] AngularJS: Миграция с 1.2 на 1.4, ч.105.10.2015 18:18

Второй проект требовал миграции с версии 1.2.16 на 1.4.4 и был существенно больше (около 75 000 строк чистого angular), а специфика продукта (бухгалтерский учёт) подразумевала сложные связи, множество форм и неизбежные проблемы, но предыдущий опыт воодушевлял.

Первым результатом миграции ожидалось получить неработающее приложение с кучей ошибок в консоли, однако приложение завелось, и никаких проблем не возникло. Это было крайне странно, поэтому я начал своё путешествие по официальному гайду, где, однако, не воспроизвелась ни одна из описанных проблем. Решив, что дело сделано, я отдал задачу на откуп QA и автоматическим тестам.

И уже на следующий день получил 9 багов, затем ещё 9, и ещё. Коварство всех найденных ошибок было не в том, что они ломают работу приложения, но в том, что незаметно изменяют его поведение.

Здесь другом и товарищем в поисках причин стал Change Log и обсуждения внутри найденных там коммитов.

Первым делом отвалились асинхронные проверки на стороне сервера, которые работали не со статусами, а с ответами в виде текстового примитива типа «OK». О таком ни один break change не оповещал, но зато был соответствующий баг-фикс.

Совет: Проверьте свою работу с XHR запросами. Если сервер вам присылает не объект, а какой-либо примитив с заголовкам «application/json», у вас будут проблемы.

Следующими посыпались спиннеры, вложенные в попапы, перестав корректно определять ширину родителя. Проблема заключалась в двух вещах. Во-первых, спиннеры лежали в ng-show, а значит инициализировались раньше, чем контейнер родителя мог быть показан. Во-вторых, показывался/скрывался спиннер, следя за атрибутом через $observe. По какой-то причине в старой версии атрибут менялся позже, чем родитель становился :visible, а в новой наоборот.

Совет:

1. Не храните динамические директивы, которым важен момент инициализации в ng-show/ng-hide, используйте для этого ng-if. Этот совет актуален и для версии 1.2
2. Не используйте $observe для слежения за атрибутами, если требуется следить за внешними изменениями иных данных (DOM или $scope). Используйте для этого $watch(function () {}, function () {}). Тем более, что оба варианта добавляют свой вотчер в грязную проверку, разница лишь в условиях вызова коллбэка.

Так же проблема коснулась условий в выражениях внутри $eval: стали пропадать некоторые блоки. Но проблема оказалась очередным баг-фиксом и уже освещалась на хабре.

Совет: Не используйте недокументированные особенности фреймворка, исследуйте код на использование при проверке следующих значений в $scope: 'f', '0', 'false', 'no', 'n', '[]'.

Главная из возникших проблем − это валидация. Начиная с версии 1.3, в ангуляре появились новые методы проверки форм, а с ними и новые подводные камни. Но есть проблемы, которые затронут вас, даже если вы не планируете использовать новую валидацию. Это директивы maxlength/minlength и новая логика работы $setValidity, которые грозят сделать вашу форму постоянно невалидной (так с нами и произошло).

Обнаружилось, что мы держали в ngModelCtrl.$error специальное свойство showError (для удобного показа ошибок по одной), что привело к постоянной инвалидации формы, поскольку в новой версии одно из условий валидности − это пустой хеш ngModelCtrl.$error.

Совет: Не кладите в свойства, начинающиеся с $ ничего, что не указано в официальном API.

Другая проблема возникла с инпутами, использующими маску (для телефона, номеров договоров и т.п.) в тандеме с директивами ng-maxlength/ng-minlength.

Обе эти директивы теперь проверяют ngModelCtrl.$viewValue вместо ngModelCtrl.$modelValue, а значит, максимальная длина для значения «xx-xx» теперь уже не 4, а 5 (с учётом символа "-"). Пришлось бы переписывать сотни правил проверки по всему приложению, поэтому было решено заменить автозаменой все ng-maxlength на кастомный model-maxlength, который снова проверял бы только модель. И это решение было ужасным! Ангуляр зарезервировал себе атрибут-ограничитель maxlength, а это значит, мы больше не могли ограничивать количество вводимых символов. В итоге было решено всё-таки поменять все правила на новые, с учётом символов маски. Однако кастомная директива model-minlength нашла своё применение в директивах, где есть предустановленные символы (например "+7 " для телефона), позволяя проверять только модель без установленных в ngModelCtrl.$viewValue префиксов.

Совет: Если вы используете маску или иным образом манипулируете значением ngModelCtrl.$viewValue, измените проверку с учётом символов маски. Используйте для предустановленных значений в инпутах с проверкой ng-minlength аттрибут placeholder или замените проверку на кастомную. Рабочий код подобной директивы есть в break changes списке.

Вторая волна проблем пошла после перехода нашей валидации на новую (прощайте, $formatters и $parsers). Мы столкнулись с тем, что ряд форм снова стал постоянно невалиден.

С синхронными валидациями ($validators) проблема обнаружилась быстро. Она заключалась в том, что в форме были скрытые через ng-show поля со своими проверками валидации. Из-за особенностей работы в старой версии ($formatters и $parsers) эти поля не включались в проверку формы, однако в новой версии ($validators) это приводит к тому, что появляется скрытое невалидное поле.

Совет: Если у вас есть формы со скрытыми динамическими полями, то скрывайте эти поля или показывайте их через ng-if, не используйте ng-show/ng-hide.

      ngModel.$asyncValidators.uniqueUsername = function(modelValue, viewValue) {
        var value = modelValue || viewValue;

        // Lookup user by username
        return $http.get('/api/users/' + value).
           then(function resolved() {
             //username exists, this means validation fails
             return $q.reject('exists');
           }, function rejected() {
             //username does not exist, therefore this validation passes
             return true;
           });
      };

Здесь из-за особенностей работы маски (через $formatters и $parsers) асинхронная валидация вызывалась ещё до завершения синхронных валидаций, при этом вызывалась по нескольку раз за 1 изменённый символ. Это порождало баг множественного создания промисов, что приводило к тому, что последний промис не был resolved или rejected. Соответственно, инпут получал бесконечный pending, а форма была невалидной без каких-либо ошибок.

    var pendingPromise;

    ngModelCtrl.$asyncValidators.checkPhoneUnique = function (modelValue) {
        if (pendingPromise) {
            return pendingPromise;
        }

        var deferred = $q.defer();

        if (modelValue) {
            pendingPromise = deferred.promise;

            $http.post('/запрос', {value: modelValue})
                .success(function (response) {
                    if (response.Result === 'Хитрое условие с сервера') {
                        deferred.resolve();
                    } else {
                        deferred.reject();
                    }
                }).error(function () {
                    deferred.reject();
                }).finally(function () {
                    pendingPromise = null;
                });
        } else {
            deferred.resolve();
        }

        return deferred.promise;
    };

Самой странной проблемой валидации стала кастомная директива ввода суммы (она выглядела как два инпута для рублей и копеек, выдавая в ngModel уже готовый результат конкатенации этих чисел). Она была не только невалидной, но и доносила из глубин фреймворка ошибку в консоль.

Времени на проблему было потрачено изрядно, проблема вновь была в ng-maxlength, а решение оказалось простое: добавить в $formatters директивы преобразование значения $viewValue в строку.

Но почему проблема вообще возникла? Давайте разберёмся!

Всё дело в работе $compile: внутри описано поведение основных директив. Например, для input и textarea вызывается контрол inputDirective, который берёт attr.type и исходя из него вызывает одну из функций коллекции inputType. Для текстовых типов это textInputType. Он, в свою очередь, прокидывает наш контрол в функцию stringBasedInputType, которая добавляет в $formatters код конвертации нашего значения в строку.

Таким образом, когда ngModel не привязан к какому-то существующему базовому элементу вроде input, а, например, висит на простом диве или кастомной директиве (в нашем случае это директива для ввода суммы), то данные прокидываются в $viewModel «как есть», что и вызывает ошибку у директив-фильтров вроде maxlength, которые для своей работы используют свойство .length, отсутствующее у чисел.

Рабочий пример на Plunker.

Совет: Все кастомные директивы, работающие с числами, обязательно должны иметь соответствующий форматтер преобразования числа в строку.

Итог:

''.sub.call.call(
    ({})["constructor"].getOwnPropertyDescriptor(''.sub.__proto__, "constructor").value,
    null,
    "alert('evil')"
)()

  $scope.isEnabled = ‘no’;

  {{ isEnabled ? ‘Не выведет’ : ‘Выведет’ }}

  {{ isEnabled ? ‘Выведет’ : ‘Не выведет’ }}

  var Foo = function() {};

  Foo.prototype.bar = 1;

  var foo = new Foo();
  var fooCopy = angular.copy(foo);

  foo.bar = 3;

  console.log(foo instanceof Foo); // => true
  console.log(fooCopy instanceof Foo); // => false

  console.log(foo.bar); // => 3
  console.log(fooCopy.bar); // => 1

  console.log(foo instanceof Foo); // => true
  console.log(fooCopy instanceof Foo); // => true

  console.log(foo.bar); // => 3
  console.log(fooCopy.bar); // => 3

  var foo = [1, 2];
  

<1.3:

  angular.forEach(foo, function (value, key) {
      foo.push(null);

      // => Будет бесконечно выводить новые null и повесит браузер
      console.log(value);
  });

  angular.forEach(foo, function(value, key) {
      foo.push(null);

      // => Выведет 1, затем 2 и остановит перебор
      console.log(value);
  });

  var foo = {bar: 1, baz: 2, $qux: 3};

  angular.toJson(value); // => {"bar": 1}

angular.toJson(value); // => {"bar": 1, "$bar": 2}

<select ng-model="model" ng-option="i in items"></select>

  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
  <option value="4">d</option>

  <option value="string:a">a</option>
  <option value="string:b">b</option>
  <option value="string:c">c</option>
  <option value="string:d">d</option>
  

ngModelCtrl.$parsers.push(function(value) {
    return parseInt(value, 10); // Конвертация в число
});

ngModelCtrl.$formatters.push(function(value) {
    return value.toString(); // Конвертация в строку
});

  <div ng-class="{hasHeader: true}"></div>
  

  <div ng-class="{active: true}"></div>
  

  <div ng-class="{active: true}{hasHeader: true}"></div>
  

А ещё недостаточным уровнем инкапсуляции таких директив и вообще.

Холивар на эту тему доступен здесь.

directive('directiveName', function() {
    return {
        link: function(scope, elm, attr) {
            var observer = attr.$observe('someAttr', function(value) {
                console.log(value);
            });
        }
    };
});

directive('directiveName', function() {
    return {
        link: function(scope, elm, attr) {
            var observer = function(value) {
                console.log(value);
            };

            var destructor = attr.$observe('someAttr', observer);

            destructor(); // Перестанет следить
        }
    };
});

  app.controller('testController', function($scope) {
      $scope.controllerScope = true;
  });

  app.directive('testDirective', function() {
      return {
          template:'<span ng-if="directiveScope">world!</span>',
          scope: {directiveScope: '='},
          controller: function($scope) {},
          replace: true,
          restrict: 'E'
      }
  });

  Hello <test-directive directive-scope="controllerScope"></test-directive> // Hello
  

  Hello <test-directive directive-scope="controllerScope"></test-directive> // Hello world!
  

$scope.resetWithCancel = function (e) {
    $scope.myForm.myInput.$cancelUpdate();
    $scope.myValue = '';
};

1.3+:

$scope.resetWithCancel = function (e) {
    $scope.myForm.myInput.$rollbackViewValue();
    $scope.myValue = '';
};

  .directive('patternModelOverwrite', function patternModelOverwriteDirective() {
      return {
          restrict: 'A',
          require: '?ngModel',
          priority: 1,
          compile: function() {
              var regexp, patternExp;

              return {
                  pre: function(scope, elm, attr, ctrl) {
                      if (!ctrl) return;

                      attr.$observe('pattern', function(regex) {
                          /**
                           * The built-in directive will call our overwritten validator
                           * (see below). We just need to update the regex.
                           * The preLink fn guaranetees our observer is called first.
                           */
                          if (isString(regex) && regex.length > 0) {
                              regex = new RegExp('^' + regex + '$');
                          }

                          if (regex && !regex.test) {
                              //The built-in validator will throw at this point
                              return;
                          }

                          regexp = regex || undefined;
                      });

                  },
                  post: function(scope, elm, attr, ctrl) {
                      if (!ctrl) return;

                      regexp, patternExp = attr.ngPattern || attr.pattern;

                      //The postLink fn guarantees we overwrite the built-in pattern validator
                      ctrl.$validators.pattern = function(value) {
                          return ctrl.$isEmpty(value) ||
                                  isUndefined(regexp) ||
                                  regexp.test(value);
                      };
                  }
              };
          }
      };
  });
  

    (function (angular) {
        'use strict';

        angular
            .module('mainModule')
            .directive('maxModelLength', maxlengthDirective);

        function maxlengthDirective () {
            return {
                restrict: 'A',
                require: '?ngModel',
                link: function (scope, elm, attr, ctrl) {
                    if (!ctrl) {
                        return;
                    }

                    var maxlength = -1;
                    attr.$observe('maxModelLength', function (value) {
                        var intVal = parseInt(value);
                        maxlength = isNaN(intVal) ? -1 : intVal;
                        ctrl.$validate();
                    });

                    ctrl.$validators.maxlength = function (modelValue, viewValue) {
                        return (maxlength < 0) || ctrl.$isEmpty(modelValue) || (String(modelValue).length <= maxlength);
                    };

                    /*
                     * Спасибо ангуляру, он забрал себе под валидатор аттрибут-ограничитель maxlength
                     * Поэтому придётся ограничивать длинну поля ручками, если мы хотим проверять модель
                     * */
                    elm.bind('keydown keypress', function (event) {
                        var stringModel = String(ctrl.$modelValue);

                        if (maxlength > 0 && !ctrl.$isEmpty(ctrl.$modelValue) && stringModel.length >= maxlength) {
                            if ([8, 37, 38, 39, 40, 46].indexOf(event.keyCode) === -1) {
                                event.preventDefault();
                            }
                        }
                    });
                }
            };
        }
    })(angular);
  

    (function (angular) {
        'use strict';

        angular
            .module('mainModule')
            .directive('minModelLength', minlengthDirective);

        function minlengthDirective () {
            return {
                restrict: 'A',
                require: '?ngModel',
                link: function (scope, elm, attr, ctrl) {
                    if (!ctrl) {
                        return;
                    }

                    var minlength = 0;
                    attr.$observe('minModelLength', function (value) {
                        minlength = parseInt(value) || 0;
                        ctrl.$validate();
                    });

                    ctrl.$validators.minlength = function (modelValue, viewValue) {
                        return ctrl.$isEmpty(modelValue) || String(modelValue).length >= minlength;
                    };
                }
            };
        }
    })(angular);
  

Когда ngModel не привязан к какому-то существующему базовому элементу вроде input, а, например, висит на простом диве или кастомной директиве, то данные прокидываются в $viewModel «как есть», без дополнительного преобразования в строку, что и вызывает ошибку у директив-фильтров вроде ngMaxlength.

Исходя из этого, все кастомные директивы, работающие с числами, обязательно должны иметь соответствующий форматтер преобразования числа в строку.

Рабочий пример на Plunker.

      001 ($rootScope)
       └ 002 ($scope of ParentCtrl)
          └ 003 ($scope of ChildCtrl)
             └ 004 ($scope of GrandChildCtrl)
  

<1.3: [Пример на Plunker]

  .controller('ParentCtrl', function($scope, $timeout) {
      $scope.$on('customEvent', function(event) {
          console.log(event.currentScope); // $id это 002

          $timeout(function() {
              console.log(event.targetScope) // => $id это 004
              console.log(event.currentScope) // => $id это 001
          });
      })
  })
  .controller('ChildCtrl', function($scope, $timeout) {
      $scope.$on('customEvent', function(event) {
          console.log(event.currentScope); // $id это 003

          $timeout(function() {
              console.log(event.targetScope) // => $id это 004
              console.log(event.currentScope) // => $id это 001
          });
      })
  })
  

  .controller('ParentCtrl', function($scope, $timeout) {
      $scope.$on('customEvent', function(event) {
          console.log(event.currentScope); // $id это 2

          $timeout(function() {
              console.log(event.targetScope) // => $id это 4
              console.log(event.currentScope) // => null
          });
      })
  })
  .controller('ChildCtrl', function($scope, $timeout) {
      $scope.$on('customEvent', function(event) {
          console.log(event.currentScope); // $id это 3

          $timeout(function() {
              console.log(event.targetScope) // => $id это 4
              console.log(event.currentScope) // => null
          });
      })
  })
  

<1.3:

  response === 'OK' // => false
  response === '"OK"' // => true
  

  response === 'OK' // => true
  response === '"OK"' // => false
  

<1.4:

  function requestTransform(data, headers) {
      headers = angular.extend(headers(), {
          'X-MY_HEADER': 'test'
      });

      return angular.toJson(data);
  }
  

  $http.get(url, {
      headers: {
          'X-MY_HEADER': function(config) {
              return 'test';
          }
      }
  })
  

< 1.3: [Пример на Plunker]

  $provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
      return function(promise) {
          return promise.then(function(response) {
              // обработка success
              return response;
          }, function(response) {
              // обработка error
              if (canRecover(response)) {
                  return responseOrNewPromise
              }
              return $q.reject(response);
          });
      }
  });

  $httpProvider.responseInterceptors.push('myHttpInterceptor');
  

  $provide.factory('myHttpInterceptor', function($q) {
      return {
          response: function(response) {
              // обработка success
              return response;
          },
          responseError: function(response) {
              // обработка error
              if (canRecover(response)) {
                  return responseOrNewPromise
              }
              return $q.reject(response);
          }
      };
  });

  $httpProvider.interceptors.push('myHttpInterceptor');