Есть ли способ мгновенного определения рефлов без использования $timeout?

Question

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

У меня это работает в большинстве случаев, но если я удаляю график таким образом, что полоса прокрутки исчезает, он не работает. Я попробовал следующее, где plotsScroller - это div с полосой прокрутки, а plotsList - это то, что внутри него:

    $scope.isScrollingPlotsList = function() {
        return plotsList.offsetHeight > plotsScroller.offsetHeight;
    }

    $scope.$watch('isScrollingPlotsList()', $scope.$apply);

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

Кто-нибудь знает, как я могу обнаружить оплавление без использования $timeout?

Answer 1

Вы можете использовать Mutation Observers для обнаружения изменений в DOM. Когда произойдет изменение, вы получите уведомление и сможете просмотреть, что изменилось.

Пример использования ( источник):

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
observer.disconnect();

Также см. Ссылку на источник для деталей.

Должно поддерживаться во всех основных браузерах, в т.ч. IE11. Для [IE9, IE11> существует polyfill, который можно использовать.

Спецификация