如何獲得DOM元素的大小時NG-顯示

我不知道如何獲得一個元素的寬度和高度，如果我設置了NG-顯示假的？

像：

<button ng-click="show()">show</button> 
<div id="showarea" style="width:50%; height:50%;" ng-show="showdiv"></div>

而且在我的控制器：

$scope.showdiv = false; 
$scope.show = function(){ 
    console.log($("#showarea").width()); 
}

這一次只打印出50（如果我給一個特定的像素數，它會得到這個數字），我想的jQuery無法得到實際的計算值。但是當我刪除ng-show並使用display：none;那麼jQuery可以獲得正確的大小。所以我猜ng-show必須做一些額外的工作，以防止jQuery計算大小。

任何人都可以給出解決方案（只要我們可以解決百分比情況的任何技巧）？

由於

來源

2015-05-15 Kuan

當一個元件具有ng-show是假的，基本上角，設置display: none在元件上施加ng-hide類。

通過手動設置display: none，您的測試可能會出現問題，因爲預計JavaScript（因此jQuery）無法計算該元素的大小。

如果你真的需要你的控制器中獲取元素的寬度，你可以使用，而不是ng-show這樣一個自定義move-away指令：

module.directive('moveAway', function() { 
    return { 
    restrict: 'A', 
    link: function(scope, elem, attrs) { 
     scope.$watch(attrs.moveAway, function(move) { 
     if (move) { 
      elem.addClass('moved-away'); 
     } else { 
      elem.removeClass('moved-away'); 
     } 
     }); 
    } 
    }; 
})

然後添加這個CSS規則：

.moved-away { 
    position: absolute; 
    left: 100000px; 
}

因此，不是被隱藏起來，而是將元素放在很遠的地方，但保持其大小。

注：如果您仍然有問題，絕對定位的元素上得到的大小（它發生時的寬度是一樣的東西50%而非50px），你可以嘗試visibility: hidden或opacity: 0.01代替，但該元素仍然會佔據相同的在DOM中出現（即使不可見）。

來源

2015-05-15 22:17:47 floribon

您還可以通過將'visibility'屬性設置爲'hidden'並將'display'屬性設置爲'block'或爲空來獲取元素的維度。 –

是的，我在評論的同時還添加了一些內容，但是由於不可見時該元素將佔據DOM中的一個位置，這可能並不需要，因爲這不會發生在'display：none' – floribon

你說得對。但是可以將元素的「display」屬性更改爲「block」，獲取其大小並將其更改爲「none」。我在[我創建的一個指令]中就是這麼做的（https://github.com/mbenford/ngTagsInput/blob/master/src/autosize.js），到目前爲止我還沒有看到任何副作用（例如閃爍）。 –

如何獲得DOM元素的大小時NG-顯示

回答

相關問題