3

所以我有一个关于页面加载时的指令，它将调整内容的大小以适应正确的尺寸。但是，当页面加载时，有一个服务调用会填充此特定内容部分的模型，并且当我获得此元素的高度时，它的大小为 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：也许这是一个包含模板的问题？尤其是看到将其包装在超时中根本没有帮助，也没有解决问题。

4

1 回答 1

1

几件事。完全不用 ng-style，你可以直接访问元素。用那个。此外，您正在观看的 htmlHeight 只是一个像素值，但您从未将其分配给范围......所以我不确定您在这里尝试做什么，但这不起作用，因为您正在观看scope.htmlHeight我没有在任何地方看到定义。

调用服务填充部分的控制器在哪里？这就是你想要 $emit 或 $broadcast 一个事件让你的指令知道它需要重绘的地方。如果控制器在指令之上，$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
     });
   }
}]);

这里不需要任何手表或类似的东西。尽量避免添加手表。

于 2013-09-24T20:06:46.823 回答