1

Question

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

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

我看到标签的方式是带有tabset / tab指令的bootstrap样式，或者使用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，这样的控制器如何与外部作用域通信？

Answer 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才会重新呈现。

如何正确设计angularjs表格应用程序？

1

2

3

1 个答案: