动态大小和AngularJS模型

时间:2013-09-24 19:25:40

标签: javascript angularjs

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

1 个答案:

答案 0 :(得分: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
     });
   }
}]);

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