Angular.js как отследить изменение высоты элемента в директиве?

Question

[kult]

есть директива:
myModule.directive("positioning", function($http, $compile) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
return scope.$watch((function() {
return $(element).height();
}), function(newValue, oldValue) {
return console.log(newValue);
});
}
};
});
но она срабатывает дважды, я так понял сразу когда не подставились значения и после того как подставились.
Возможно ли отследить только второй вариант?

Comments

[Никита Гущин]

Для вставки отформатированного кода есть специальный тег =/

Answer 1

[Никита Гущин]

Возможно, вам поможет вот этот метод

myModule.directive("positioning", function($http, $compile) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var height;
            $(element).load(function(){
                height = $(this).height();
            });
            return scope.$watch((function() {
                return height;
            }), function(newValue, oldValue) {
                return console.log(newValue);
            });
        }
    };
});

Answer 2

[maxaon]

функция обработки всегда вызывается один раз перед работой с идентичными параметрами. Если вам необходимо выполнять действия только при изменении добавте сравнение. Также нет необходимости еще раз оборачивать элемент в jQuery, он уже обернут (если вы правильно подключили jQuery - до ангуляра). Также делайте watchExp максимально быстрым поскольку он вызывается много раз за дайджест цикл. Если вы можете обойтись без работы с домом, сделайте это.

В итоге директива может выглядеть так:

myModule.directive("positioning", function ($http, $compile) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var rawElement=element[0];
      return scope.$watch((function () {
        return rawElement.clientHeight;
      }), function (newValue, oldValue) {
        if (newValue === oldValue)
          return;
        return console.log(newValue);
      });
    }
  };
});