1

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

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

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

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

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

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

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

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

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

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

谢谢，

4

1 回答 1

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。

现场演示（点击）。

于 2013-09-12T07:09:27.010 回答