发生无序的属性更改的角度事件

Question

背景：
我有一个提示框，显示焦点随着错误/信息消息的变化而改变大小。例如，在模糊时，框将保留，但如果字段验证失败，则会添加错误消息。然后，当用户开始输入错误信息时，错误信息就会消失。所有这些行为都由 ng-show 控制。例如，错误消息位于 ng-show="hasError" 的 div 中。因此当控制器的 hasError 设置为 true 时，框会显示错误，从而改变提示框的高度。

目标：
我想根据盒子的偏移高度动态地（垂直地）重新定位盒子。我通过重置元素的底部边距来实现这一点。

问题：
由于 angular 的指令 ng-show 导致高度本质上发生变化，我很难在正确的时间重新计算提示框的高度，这是一种很好的方式。

我可以添加一个处理程序，例如，handleError，当检测到错误时调用它。它看起来像这样：

scope.handleError = function () {
    scope.hasError = true;
    $timeout(resetHeight, 30); 
};

但是，如果没有超时代码，则在添加错误之前调整大小，从而弄乱了 margin-bottom 值。我真的觉得使用这样的超时不太舒服，因为它感觉很糟糕，如果用户确实遇到了一些减速，它会失败。

我也尝试过像这样使用 $watch：

scope.$watch('hasError', resetHeight, true);

这似乎也在错误再次显示之前触发，弄乱了边距底部，导致显示偏离中心。

所以问题是，在 Angular 中，有没有办法让一些逻辑在指令之后执行，特别是 ng-show？可以某种特定的用法与 $watch 类似吗？

谢谢，

Answer 1

您可以做很多事情，但我认为制定自己的指令将是最简洁有效的选择。这是一个例子：

app.directive('showResize', function() {
  return {
    link: function(scope, element, attrs) {
      element.hide();
      var height = 50;
      scope.$watch(attrs.showResize, function(shouldShow) {
        if (shouldShow) {
          console.log('ran');
          element.show(); 
          height = height+50;
          console.log(height);
          element.css('height', height+'px');       
        }
        else { element.hide(); }
      });
    }
  };
});

这使您可以控制显示/隐藏和调整大小的顺序，因此您根本不需要ng-show。

Live demo here (click).