Question

我有一个ng-if属性的div。在成功解决$http承诺后，相应的表达式变为真。

div包含ul，而li又包含ng-repeat $http。列表项是根据ul调用返回的数据创建的。 ul有一个垂直滚动条。

生成所有列表项后，我想调整ul的高度，以便{{1}}有一个滚动条而窗口没有。

我有一个功能就是这样做。它从窗口调整大小事件处理程序调用时工作。生成列表项后，我无法弄清楚如何立即调用它。我怎么能这样做？

Answer 1

我对Angular2也有同样的问题：在* ngIf变为true之后，无法使用jQuery访问元素。我的走动是：

setTimeout(() => { /* your code */ }, 0);

代码将在DOM元素可用后执行。

Answer 2

您可以将该函数传递给填充范围的相同承诺，仅将其包装在$timeout中。

看起来像是：

$http.get('/someUrl').success(function(res){
  $scope.data = res;
  $timeout(resizeFn);
});

Answer 3

我会为此创建一个指令：

.directive('adjustHeight', function ($timeout, $window) {
    function adjustHeight(elem) {
        // Do stuff - adjust the height
    }

    return {
        restrict: 'A',
        scope: {
            data: '='
        },
        link: function postLink(scope, elem, attrs) {
            var resizeListener = function (evt) {
                adjustHeight(elem);
            };

            /* Adjust height on window resize */
            $window.addEventListener('resize', resizeListener);

            /* Adjust height when data changes
             * (if necessary add an extra property for when being visible) */
            scope.$watchCollection('data', function (newValue, oldValue) {
                if (newValue.length === oldValue.length) {
                    /* Maybe you don't need to re-adjust the height
                     * if the number of elements hasn't changed */
                    return;
                }

                /* Wrapping the function inside a $timeout will ensure that
                 * the code is executed after the next browser rendering
                 * (thus after the modified list has been processed by ngRepeat) */
                $timeout(function () { adjustHeight(elem); });
            });

            /* Make sure to clear the window-resize listener, 
             * once the element is removed */
            scope.$on('$destroy', function () {
                $window.removeEventListener('resize', resizeListener);
            });
        }
    };
});

然后，您可以像这样使用它：

<div ng-if="someCondition" adjust-height data="items">
    <ul>
        <li ng-repeat="item in items">{{item.property}}</li>
    </ul>
</div>

在ng-if变为true之后访问DOM元素

3 个答案: