Question

我有一种情况，可以创建动态数量的TABS（即使用点击命令菜单中的条目，并将新的药片 - 标签对添加到已存在的那些 - 注意：我正在使用Bootstrap对于图形元素）。

选项卡列表在$ rootScope数组中管理，每当需要打开新选项卡时，都会向数组添加一个条目（简单push操作）。当然，有一个ng-repeat来处理药片对的实际创建。

这很有效（添加标签和药丸，除了我不能将新标签设置为 ACTIVE ，因为它创建（即添加到列表中）在控制器内发生DOM仍然不知道元素。

我想过要设置某种计时器，但这条路非常难看。

Answer 1

你可以在angular中使用的一件事是$ timeout service：

https://docs.angularjs.org/api/ng/service/ $超时

例如，如果在呈现指令并初始化控制器之后需要执行一些步骤，则只需添加到控制器代码的末尾：

$timeout(function(){ $scope.steps_to_do(); } );

这将在组件的摘要循环完成后触发步骤。

在单元测试中你也可以很好地控制它。

因此，一种可能的方法是：

在添加新标签之前，在某个父范围或服务中创建承诺
创建子控制器后，在该子控制器的$ timeout上添加promise解析

Answer 2

不要使用超时或类似的东西，因为你永远不知道加载它需要多长时间。我的建议是在你的ng-repeat上使用这个指令：

.directive('onFinishRender', function ($rootScope) {
        return {
            restrict: 'A',
            link: function (scope, element, attr) {
                if (scope.$last) {
                    $rootScope.$broadcast("ngRepeatFinished");
                }
            }
        };
    });

HTML：

<ul>
   <li class="pages" data-ng-repeat="page in sidebarPages" on-finish-render></li>
</ul>

这样做是听取在ng-repeat中呈现的最后一项，然后向控制器发送$ broadcast事件。你需要做的就是在控制器中监听这个事件：

$rootScope.$on('ngRepeatFinished', function(event, args) {

    // do what you want to do
});

您还可以尝试$viewContentLoaded

$scope.$on('$viewContentLoaded', function(event, args) {

    // do what you want to do
});

AngularJS ng-repeat生成TABS

2 个答案: