Question

我是Angular和编程世界的新手。我在div中有d3图形的指令，也有可折叠的侧面菜单指令。当侧面菜单折叠时，我需要调用图形控制器的resize（）函数。我希望图表能够扩展和缩小，具体取决于侧边菜单是折叠还是打开。

当侧面菜单折叠时，图形向左移动235px，我试图在图形指令元素的x坐标（左侧位置）上设置一个监视并调用resize（）函数; 到目前为止，我有以下代码：

  $scope.$watch(function() {
            return $element[0].getBoundingClientRect().left;
        }, function() {
            if (graph) {
                graph.resize();
            }
        });

问题：只有在侧面菜单折叠或打开后将鼠标悬停在图形上的鼠标上时，才会调用resize函数并按预期工作。我想调用resize函数而不将鼠标悬停在图形区域上的鼠标上。看起来像手表只能在鼠标悬停时执行。发生了一些意想不到的行为。我花了几个小时来实现这个功能但没有成功。

有人可以建议我做错了吗？

谢谢。

Answer 1

$ scope。$ watch仅监视$ scope的属性。您可以在$ scope中添加标记，并在菜单更改其可见性时更改其状态。它取决于你如何达到（例如<a class="menu-toggler" ng-click="menuVisible=!menuVisible">toggle menu</a>）。然后：

$scope.menuVisible = true; // or false
$scope.$watch('menuVisible', function() {
     if (graph) {
           graph.resize();
     }
});

<强> UPD 请原谅：似乎观看功能。

<$> $ $触发$ digest周期。见docs：

scope.$watch(
     function() { return food; },
     function(){}
);
food = 'cheeseburger';
scope.$digest();

所以看起来当你悬停图表时 - $ scope中的某些内容会被更改并且$ digest会被启动。

为了实现您想要的行为，您无论如何都应该触发$ scope范围内的某些内容。它可能是$ event，$ digest，任何$ scope.property - 东西。

如何在元素位置的变化上设置$ watch？

1 个答案: