javascript - 动态大小和 AngularJS 模型

Question

所以我有一个指令，用于在页面加载时调整内容的大小以适应正确的尺寸。然而，当页面加载时，有一个服务调用填充了这个特定内容部分的模型，当我获得这个元素的高度时，它的大小为 0，因为模型在调整大小时没有更新。我试图在页面加载后立即调整大小，以便用户不会注意到元素在屏幕上四处移动，但如果元素的大小是在模型更新后决定的，那实际上是不可能的。

有什么方法可以计算出 enzyme 切后切片的高度或获得合适的预 enzyme 切高度？

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:我认为在加载 Controller 之前解决获取数据会处理它，但高度仍然返回 0。

更新 2:也许这是一个更重要的问题，因为它是一个被包含的模板？特别是看到将其包装在超时中根本没有帮助，也没有解决。

Answer 1

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

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

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