Question

我需要对div属性更改做出反应（element.getBoundingClientRect().left），所以我$scope.$watch()了解它。该元素由可滚动的持有者包裹。

它有点工作，但只要持有者不可滚动，观察者才会触发。我可以通过手动检查元素道具来更新clientRect。

可以看到一个例子here。继续添加框，直到滚动显示。请注意box1ClientRectLeft停止更新。单击刷新按钮，您将看到值按预期更改。取出框，直到滚动消失并让观察者再次工作。我该如何解决这个问题？

注意：必须在不使用滚动等DOM事件的情况下完成。

代码：

angular.module('test', [])
.controller('boxesController', controller);

function controller ($scope) {  
  $scope.boxes = [
    { name: 1 }
  ];

  $scope.add = function () {
    $scope.boxes.push({name: $scope.boxes.length + 1});
  };

  $scope.remove = function () {
    $scope.boxes.pop();
  };

  $scope.refreshClientRect = function () {
    $scope.box1ClientRectLeft = document.querySelectorAll('#box-1')[0].getBoundingClientRect().left;
  }

  $scope.$watch(() => document.querySelectorAll('#box-1')[0].getBoundingClientRect().left, (val) => {
    $scope.box1ClientRectLeft = val;
  });

}

AngularJS $观看一个div元素属性

0 个答案: