动态大小调整和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 
    }); 
    } 
}]); 

任何手表或类似的东西在这里没有真正的需要。尽量避免添加手表。