【问题标题】：How properly design angularjs tabular app?如何正确设计 angularjs 表格应用程序？
【发布时间】：2014-09-24 09:20:38
【问题描述】：

单页应用程序由最初或工作期间创建的选项卡组成。用户应该能够打开和关闭新选项卡，在它们之间来回切换，而不会更改嵌套小部件的影响状态。选项卡包含许多视图，包括以网格呈现的各种输入和数据集。

如果我理解正确的话，ng-route 和 ui-route 替换了所有内容 ng-view/ui-view，它们不能保存复杂的状态，也不能用来实现这样的选项卡。

我看到选项卡的方式是使用 tabset/tab 指令或手动使用 ng-show/ng-hide 的引导样式。

1

如果我这样做：

<div ng-controller="TabsCtrl as ctrl">
<tabset>
  <tab ng-repeat="tab in ctrl.tabs>something</tab> 
</tabset>
</div>

如何在 ctrl.tabs 添加/删除它们时不重新呈现所有选项卡？使用 tabs.push/tabs.splice 能保证这一点吗？

2

要使标签页在应用程序的任何位置都可用，它可能应该是一项服务。但是要渲染它们，它应该是控制器。我想出了这样的设计：

.service('TabService', function() {
    this.tabs = []; /* list of all application tabs */
    this.openTab = function() { ... };
    this.closeTab = function() { ... };
})
.controller('TabsCtrl', function TabCtrl(TabService) { 
    this.tabs = TabService.tabs; /* to make it bindable in view */
    this.openTab = TabService.openTab; /* to attach to some ng-click or whatever */
})

看起来很奇怪，但还有其他方法吗？

3

当创建新标签时，它应该从 TabService.openTab 方法传递一些参数。或者，如果它可以识别自己，它可能会向 TabService 请求参数。

如果使用

创建选项卡

<tab ng-repeat="tab in ctrl.tabs"><ng-include src="tab.src"></tab>

tab.src 引用了一些带有内部控制器的部分 html，这样的控制器如何与外部范围通信？

【问题讨论】：

标签： javascript angularjs twitter-bootstrap tabs

【解决方案1】：

ui-router 可以配置控制器和空模板

.config(function($stateProvider, $urlRouterProvider){
  $stateProvider
    .state('main', {
      url: "/foo/index",
      template: 'empty',
      controller: 'MainCtrl'
      })
    .state('foo', {
      url: "/foo/:fooId",
      template: 'empty',
      controller: 'FooCtrl'
      });

每次状态更改并传递状态参数时都会调用此控制器。然后它可以访问服务以切换/打开/创建选项卡。

另一个控制器需要将服务与视图绑定。

http://plnkr.co/edit/Ns344fo9u4C1nbQ77Jd8

并且 ng-repeat 仅在对象标识更改时重新渲染。

【讨论】：