Question

我有一个指令来调整元素的宽度。它称为 flex-column 。这在我的整个应用程序中一直有效。它的工作方式是查看指令的子项并计算每个子项的高度。如果高度大于视口，则它将增加指令的宽度。

我遇到ng-show的问题。通常我使用ng-if，但是在这种情况下，我需要使用ng-show。问题在于，我的指令计算子项的高度（由于元素被隐藏，因此其高度为0）并且不会更改宽度。

当ng-show为true时，将显示内容，但是我的指令不会再次触发，因为仅显示了if。所以，我的问题是：

我可以覆盖ng-show指令来触发我的指令代码还是
当ng-show为真时，是否有办法触发我的指令？

Answer 1

您有很多选择，但是这里有几个：

您可以修改指令以侦听在示波器上广播的事件，无论哪个控制器将ng-show表达式中的条件从false更改为true，然后在该位置重新运行测量代码点。
您可以在指令的link函数中检查是否设置了ng-show属性，如果设置了此属性，请对表达式进行监视，该表达式将在更改时重新测量从false到true。如果您只可能遇到ng-show的问题，则我更喜欢这种方法，因为它不需要更改任何其他代码。

＃2的代码非常简单：

function postLink (scope, element, attributes, controller) {
  if (attributes.ngShow) {
    scope.$watch(attributes.ngShow, (newVal, oldVal) {
      if (newVal && !oldVal) {
        controller.measure();
      }  
    }
  } else { 
    // note this is in an else to prevent measure firing twice
    // if ngShow is set and it's initially true.
    controller.measure();
  }
}

AngularJs ng-show和custom指令

1 个答案: