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-style，你可以直接访问该元素。用那个。另外，你正在观看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
     });
   }
}]);

此处不需要任何手表或类似物品。尽量避免添加手表。

动态大小和AngularJS模型

1 个答案: