在 Angular JS 中，有没有一种方法可以在不使用 scope.watch 的情况下监视 DOM 的变化？

Question

我正在尝试创建一个 angularjs bootstrap 手风琴，它在打开时将手风琴滚动到顶部。

这些解决方案与我想做的很接近：

https://www.peterbouda.eu/making-an-angular-ui-bootstrap-accordion-scrolling-to-top-when-opening.html

但是，他们使用超时或范围监视。除非绝对必要，否则我想避免使用这些。

有没有不使用 $watch 或 setTimeout 来完成此操作的方法？

这是我正在尝试做的事情的一部分，这是使用 $watch：https://plnkr.co/edit/XQpUdrdjqaCGom4L9yIJ

app.directive( 'scrollTop', scrollTop );

function scrollTop() {
    return {
        restrict: 'A',
        link: link
    };
}

function link( scope, element ) {
    scope.collapsing = false;
    var jqElement = $( element) ;
    scope.$watch( function() {
        return jqElement.find( '.panel-collapse' ).hasClass( 'collapsing' );
    }, function( status ) {
        if ( scope.collapsing && !status ) {
            if ( jqElement.hasClass( 'panel-open' ) ) {
                $( 'html,body' ).animate({
                    scrollTop: jqElement.offset().top - 30
                }, 500 );
            }
        }
        scope.collapsing = status;
    } );
}

Answer 1

指令可以简化为：¹

app.directive( 'scrollTop', function scrollTop($timeout) {
    return {
        restrict: 'A',
        link: postLink
    };
    function postLink(scope, elem, attrs) {
        elem.on("click", function(e) {
          if (scope.status.isOpen) {
            $timeout(function() {
              $( 'html,body' ).animate({
                scrollTop: elem.offset().top - 30
              }, 500 );
            });
          }
        });
    }
})

<uib-accordion>
  <div heading="Section Title" is-open="status.isOpen"
       ng-repeat="section in vm.sections"
       scroll-top
       uib-accordion-group>
    <uib-accordion-heading>
      <div ng-class="{isOpen: vm.isOpen}">
        <h3>{{section.sectionTitle}}</h3>
        <p>{{section.sectionSubHeader}}</p>
      </div>
    </uib-accordion-heading>
    <div class="clearfix">
      <b>Index+1={{$index+1}}</b> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</uib-accordion>

$timeout 是必需的，因为浏览器需要用新打开和关闭的元素渲染 DOM，然后才能计算出正确的滚动偏移量。

DEMO on PLNKR

Answer 2

我找到了一种从控制器执行此操作的方法。

我添加了一个在 ng-click 上触发的函数来报告手风琴的 is-open 状态。

使用组件生命周期挂钩 $doCheck 我能够观察 vm.isOpen 的状态变化。 $doCheck 在每个摘要周期结束时运行，所以我不需要设置 $scope.watch 或 $timeOut

$doCheck 运行与问题中指令基本相同的代码

app.controller('homeController', function($state, $element, sections, $transitions) {
  var vm = this;

  vm.$onInit = function() {
    vm.sections = sections.getSections();
  };

  function updateOpenStatus() {
    vm.collapsing = false;
    vm.isOpen = vm.sections.some(function(item) {
      return item.isOpen;
    });
  }

  vm.$doCheck = function() {
    if (vm.isOpen) {
      var elem = $element.find('.panel-collapse');
      var status = elem.hasClass('collapsing');
      if (vm.collapsing && !status) {
        var parentElem = elem.closest('.panel-open');
        if (elem.parent().hasClass('panel-open')) {
          $('html,body')
            .stop()
            .animate({
              scrollTop: parentElem.offset().top - 52
            }, 'fast');
        }
      }
      vm.collapsing = status;
    }
  };
});

我更新了 uib-accordion 以调用控制器中的函数

<uib-accordion>
  <div heading="Section Title" is-open="section.isOpen" ng-repeat="section in vm.sections" scroll-top uib-accordion-group>
    <uib-accordion-heading>
      <div ng-class="{isOpen: section.isOpen}" ng-click="vm.toggleOpen()">
        <h3>{{section.sectionTitle}}</h3>
      </div>
    </uib-accordion-heading>
    <div class="clearfix">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</uib-accordion>

已更新 Plnkr：https://plnkr.co/edit/5EqDfmVOa0hzFfaQqdI0?p=preview

在 Angular JS 中，有没有一种方法可以在不使用 scope.watch 的情况下监视 DOM 的变化？

In Angular JS, is there a way to watch for changes to the DOM without using scope.watch?

angularjs

angularjs-directive

angularjs-scope

angular-ui-bootstrap