angularjs - 根据其中 li 元素的数量设置 UL 的宽度 AngularJS

Question

我想根据 UL 中的 LI 元素的数量来更新我的 UL 的宽度，目前我正在通过创建一个带有 $timeout 的自定义指令来做到这一点，这实际上延迟了要加载内容的页面，而且我使用 jQuery 和 AngularJS 的混合实现了这一点。

有没有更好的方法可以通过观察控制器中的变量并将其传递给 ng-style 以纯角度方式执行此操作？我的页面包含几个具有可变数量 LI 的 UL。请建议。

app.directive('setUlLength', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            $timeout(function () {
                var totli = $(element).find('ul').children('li').length;
                var liwid = $(element).find(".prod-gall ul li:first").outerWidth(true);
                var setUlWidth = totli * liwid;
                $(element).find('.prod-gall ul').css({ 'width': setUlWidth + 'px' });
            });
        }
    };
});