2017-04-04 93 views
0

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

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

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

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

任何建议将不胜感激。

,你可以在角使用
+0

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

+0

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

+0

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

回答

0

一件事是$超时服务:

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

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

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

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

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

所以,一个可行的方法是:

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

不要使用超时或类似这样的事情,因为您永远不知道需要多长时间来加载它。 我的建议是使用这个指令你的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 
}); 
+0

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

+0

这是否工作? – TSlegaitis

+0

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