Question

我正在指定一个基于元素高度改变其行为的指令，如下所示：

module.directive 'contentView', ->
  restrict: 'A'
  link: ($scope, $element, $attributes) ->
    if $element[0].clientHeight > 50
      # Do something.
    else
      # Do something else.

在我的规范中，我想修改元素的clientHeight以测试条件。但是，无论我做什么，它始终都是0。

# Boilerplate testing code excluded.

element = $compile('<div content-view></div>')(scope) 
element[0].clientHeight = 50
$rootScope.digest()

# This still evaluates to 0 in the spec and when the code runs.
console.log element[0].clientHeight

我也尝试在传递给$ compile（<div content-view style="100px"></div>）的HTML中添加内联样式，但这不会改变任何内容。

我可以通过某种方式在测试中指定clientHeight吗？

Answer 1

以上是基于@ jantimon解决方案的解决方案。除非包含在$timeout块中，否则也不会计算高度。我不完全确定为什么会这样，但我认为它与Angular的DOM生命周期有关。

也许对此有更好理解的人可以提供更优雅的解决方案，但以下工作：

指令：

module.directive 'contentView', ($timeout) ->   
  restrict: 'A'
  link: ($scope, $element, $attributes) ->
    $timeout ->
      if $element[0].clientHeight > 50
        # Do something.
      else
        # Do something else.

规范（不包括注入服务的样板）：

element = $compile('<div content-view></div>')(scope)
element.css 'height', '50px'

$document.find('body').append(element)
$timeout.flush()

# Correctly reports as 50.
console.log element[0].clientHeight

如何在AngularJS单元测试中为指令设置元素的高度？

1 个答案: