動態大小調整和AngularJS模型

Question

所以我有一個指令，當頁面加載時將調整內容大小以適應正確的尺寸。然而，當頁面加載時有一個服務調用來填充這個特定內容部分的模型，並且當我獲得這個元素的高度時，它的大小爲0，因爲模型在調整大小時沒有更新。我試圖在頁面加載後立即調整大小，以便用戶不會注意到在屏幕上移動的元素，但如果在更新模型後決定了元素的大小，則不太可能。

有什麼方法可以計算消化後部分的高度或獲得適當的消化前高度嗎？

myApp.directive('resize', function() { 
    return function(scope, element) { 
     var htmlHeight = angular.element("html").height(); 
     var headerHeight = angular.element("#page-header").height(); 
     var dashboardHeight = angular.element(".top-dashboard").height(); // Returns 0 because of pre-loaded data not existing 
     var totalHeight = htmlHeight - headerHeight - dashboardHeight; 
     scope.$on('$viewContentLoaded', function() { 
      element[0].style.height = totalHeight + 'px'; 
     }); 
    } 
}); 

上面有指令的HTML：

<section class="top-dashboard row full" resize> 
    <div class="small-3" ng-include src="'partials/location.html'"></div> 
</section> 

更新1：我覺得做一個決心已預裝了會照顧好它的控制器前的數據，但高度仍然返回0.

更新2：也許這是一個更大的問題，因爲它是一個包含模板的事實？尤其是看到在超時中包裝它根本沒有幫助，也沒有做出決定。

Answer 1

幾件事情。不要打擾ng風格，你可以直接訪問元素。使用它。此外，你正在觀看htmlHeight，它只是一個像素值，但你從來沒有把它分配給範圍......所以我不確定你在這裏做什麼，但這不會工作，因爲你在看scope.htmlHeight，我沒有看到任何地方定義。

調用服務來填充部分的控制器在哪裏？這就是你希望$ emit或$廣播一個事件讓你的指令知道它需要重繪的地方。如果控制器在指令之上，則使用$scope.$broadcast('resizeMe');，否則以相同方式使用$scope.$emit。

然後在你的指令，你可以做這樣的事情

myApp.directive('resize', ['$timeout', function($timeout) { 
    return function(scope, element) { 
    var $html = angular.element("html"), 
     $header= angular.element("#page-header"), 
     $dash= angular.element(".top-dashboard"); 

    var resize = function(){  
     var totalHeight = $html.height() - $header.height()- $dash.height(); 
     element.style.height = totalHeight + 'px'; 
    } 

    scope.$on('resizeMe', function(){ 
     $timeout(resize); //forces it to wait till the next digest 
    }); 
    } 
}]); 

任何手錶或類似的東西在這裏沒有真正的需要。儘量避免添加手錶。