在Angular JS中，有没有办法在不使用scope.watch的情况下监视DOM的更改？

特立独行的

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

这些解决方案接近我想要做的事情：

但是，它们使用超时或示波器监视。除非绝对必要，否则我想避免使用它们。

有没有一种无需使用$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;
    } );
}

特立独行的

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

我添加了一个被触发ng-click以报告is-open手风琴状态的功能。

使用组件生命周期挂钩，$doCheck我能够观察到状态的变化vm.isOpen。$doCheck在每个摘要周期的末尾运行，因此我不需要设置a$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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。