AngularJS ng-repeat生成TABS

我有一种情况，可以创建一个动态数量的TABS（即在命令菜单中使用点击和一个新的药片选项卡对添加到已有的 - 注意：我使用Bootstrap作为图形元素）。AngularJS ng-repeat生成TABS

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

这很好用（除了我不能将新选项卡设置为自创建之后（即添加到列表中）发生在控制器中且元素仍未知的项目之外，添加了选项卡和药片到DOM。

我想设定某种形式的计时器，但是这条道路是极其丑陋。

任何建议将不胜感激。

，你可以在角使用

来源

2017-04-04 FDavidov

哪里是你的代码？你用这个[bootstrap.ui]（https://angular-ui.github.io/bootstrap/#!#tabs）吗？ –

我可以添加代码，但不会添加任何见解。这是一个时间问题（即元素被渲染，只有这样它才能被访问来设置class ** active **，但是当元素被添加到控制器中的数组时，该元素仍然不为DOM所知）。按照bootstrap.ui，不，我没有使用它。 – FDavidov

我建议你看看我的链接，这是一个原生的angularjs bootstrap实现，它会让你的生活更轻松 –

一件事是$超时服务：

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

例如，如果你需要做一些步骤的指令被渲染器和控制器初始化后，然后只需添加到控制器代码的末尾：

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

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

另外你在单位测试中对它有很好的控制。

所以，一个可行的方法是：

添加新的选项卡之前，创建中创建子控制器
后，一些家长范围和服务承诺，在$添加一个承诺解决在该子控制器中的超时时间

来源

2017-04-04 08:36:00

不要使用超时或类似这样的事情，因为您永远不知道需要多长时间来加载它。我的建议是使用这个指令你的NG-重复：

.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-重复，然后起火$广播事件给控制器。你需要做的是什么听这样在你的控制器事件：

$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 
});

来源

2017-04-04 08:43:12 TSlegaitis

不错的做法，虽然我会使用'$ emit'而不是'$ broadcast'。会试一试，让你知道。谢谢。 – FDavidov

这是否工作？ – TSlegaitis

还没有尝试过。别担心。一旦我尝试，我会让你知道（如果它解决了我的问题，并投票）。 – FDavidov

AngularJS ng-repeat生成TABS

回答

相关问题