Question

我需要根据另一个DOM元素设置DOM元素的高度，但在指令的postLink回调期间，该元素的高度为零。似乎在将指令HTML添加到DOM之前调用了postLink回调。

我试图找到答案让这个工作，但到目前为止没有运气。我找到了几个答案，指的是$timeout，但是AngularJS手册说这是setTimeOut的别名。使用超时回调似乎非常错误。

我读到的另一件事是使用$ watcher来观察DOM中的变化，但这对我来说似乎也是错误的。

cgTag.Navigate.NavigateDir = function()
           {
               return {
                   link: function(scope, $el, attrs)
                   {
                        var $navBg = $el.find('.cgNavBg');
                        var $sections = $el.find('.cgSections');
                        $navBg.css('height', $sections.outerHeight() + 'px');
                   },
                   template: cgTag.Common.templates.get('Layout.Menu')
               };
           };

cgTag.App.directive('cgNavigateDir',cgTag.Navigate.NavigateDir);

我想要做的就是在渲染模板后运行代码来设置我的HTML。

我是AngularJS的新手，但这似乎直线不直观。

Answer 1

因此.cgSections包含在范围变量集合上使用ng-repeat创建的子元素。所以我最终使用$scope.$watchCollection来设置CSS的高度。

这似乎解决了这个问题，但我不确定为什么。

cgTag.Navigate.NavigateDir = function()
           {
               return {
                   link: function($scope, $el, attrs)
                   {
                       $scope.$watchCollection('sections',function()
                       {
                           var $navBg = $el.find('.cgNavBg');
                           var $sections = $el.find('.cgSections');
                           $navBg.css('height', $sections.outerHeight() + 'px');
                       });
                   },
                   template: cgTag.Common.templates.get('Layout.Menu')
               };
           };

cgTag.App.directive('cgNavigateDir',cgTag.Navigate.NavigateDir);

因此，当范围内的某些内容发生变化时，AngularJS会执行此摘要周期。 AngularJS中没有 post digest 方法。因此，您只能在事情发生变化时添加要执行的观察者。首次创建指令时，似乎在调用postLink后将消化范围。

在我的上述修复中。它更有意义，因为如果集合的大小发生变化，那么无论如何都需要更新DOM元素。

在指令postLink方法中，元素的高度为零

1 个答案: