Question

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

目标：
我想根据盒子的偏移高度动态地重新定位（垂直）盒子。我是通过重置元素上的margin-bottom来实现的。

问题：
因为角度的指示ng-show，高度基本上会发生变化，所以我很难在合适的时间重新计算尖端盒的高度。

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

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

但是，如果没有超时代码，则会在添加错误之前进行调整大小，从而弄乱边距底部值。我觉得使用像这样的超时感觉并不舒服，因为它感觉很乱，如果用户确实遇到了一些慢下来就会失败。

我也试过像这样使用$ 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).

财产变动的角度事件发生在故障中

1 个答案: