angularjs - 在 Angular JS 中，有没有办法在不使用 scope.watch 的情况下监视 DOM 的变化？

问题描述

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

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

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

$watch有没有办法在不使用or的情况下做到这一点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;
    } );
}

标签： angularjsangularjs-directiveangularjs-scopeangular-ui-bootstrap

该指令可以简化为：¹

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。

PLNKR 上的DEMO

angularjs - 在 Angular JS 中，有没有办法在不使用 scope.watch 的情况下监视 DOM 的变化？

问题描述

解决方案

推荐阅读