在模板中使用AngularJS依賴關係

我想將max-height設置爲$window.innerHeight。下面的代碼失敗：在模板中使用AngularJS依賴關係

<div ng-style="{'max-height': $window.innerHeight}" style="overflow-y: auto">

我步行約是使用範圍變量：

$scope.divnHeight = $window.innerHeight; 
<div ng-style="{'max-height': divHeight}" style="overflow-y: auto">

有沒有什麼辦法來實現ng-style到$window結合？

感謝

來源

2014-09-10 Michael

你能用你的代碼創建一個plunker嗎？你可以用這個簡單的設置進行分解：http://plnkr.co/edit/eqKz9wgyzm8LOz6pZAN0?p=info – SoluableNonagon 2014-09-10 15:34:15

看到我的更新 – SoluableNonagon 2014-09-10 15:36:27

你錯過了ng風格的'px'，只是注意到，看到我的答案在下面鏈接到猛虎 – SoluableNonagon 2014-09-10 15:42:15

你錯過了 'PX' 在NG-風格

見Plunker：http://plnkr.co/edit/eqKz9wgyzm8LOz6pZAN0?p=preview

要回答你的問題，沒有任何...變量要使用在HTML中必須是一個範圍變量。

如果窗口的高度是變化的，那麼你可以使用一個觀察者的變量綁定到窗口高度：

$scope.$watch(function(){ 
    return $window.innerHeight; // the thing to watch 
}, function(newValue, oldValue) { // the function to run when the value changes 
    console.log(newValue); 
    $scope.divnHeight = $window.innerHeight; 
});

更新：

嘗試添加該到你的控制器，這只是註冊了一個功能火，當你調整：

window.onresize = function(event) { 
    console.log("Fire resize"); 
    $scope.divnHeight = $window.innerHeight; 
};

而且，因爲使用的是最大高度，而不是高度尺寸保持不變，在這種情況下，高度取決於內容，請嘗試使用高度，看看是否有所作爲：

<div ng-style="{'height': divHeight + 'px'}" style="overflow-y: auto">

來源

2014-09-10 15:01:00 SoluableNonagon

感謝EliteOctagon！在我的Chrome瀏覽器中，即使在更改窗口大小時，此代碼也只執行一次...因此，此解決方案不會比我的原始解決方案更好。 – Michael 2014-09-10 15:25:11

@Michael，在定義高度時需要使用提到的度量單位，在這種情況下，它將是像素 – SoluableNonagon 2014-09-10 15:44:20

在模板中使用AngularJS依賴關係

回答

相關問題