许多活动状态与ui-router同时发生

时间:2014-04-02 01:55:44

标签: angularjs angular-ui-router

您希望能够做的是:

我在shell中有一个活动状态'order.detail',这些细节会在每个产品系列中提供一个链接,导致'product.detail'状态,这也是一个可以在shell中显示的状态。 / p>

但是这个链接应该在对话框中将状态'product.detail'显示为一个框架而不改变当前位置并保持shell中的活动状态不变。

同样是'product.detail'状态,用作shell的主视图,并允许它们重用,你的模板应该用'div'对话模板包装。

我的意思是,允许在不离开当前屏幕的情况下查看某些内容的详细信息,并使用相同的现有详细信息屏幕进行查看,或者仅允许使用现有视图的相关数据“向下钻取”。

1 个答案:

答案 0 :(得分:1)

AngularJS中的共享状态

Angular的一大优点是,通过providers跟踪状态非常容易。

例如,考虑一个 index 视图,其中包含带有许多过滤器选项的分页网格表。单击其中一个条目将转到该条目的详细信息视图。当用户从详细信息返回到索引时,他/她将期望网格的UI状态与他们离开它的方式完全相同:相同页面,相同排序,应用相同的过滤器,相同的一切。使用传统技术,您将不得不回退cookie,查询参数和/或服务器端状态(较少)魔法,这些都感觉(实际上)非常麻烦且容易出错。

提供者值是Angular世界中的单例,因此当我们在其中一个控制器中注入实例时,它将始终是同一个实例。另一方面,控制器将在每次请求时重新创建。

实施例

注册一个空对象以跟踪控制器:

myApp.value('formState', {});

创建一个控制器,注入提供者值并在范围上公开它:

myApp.controller('MyController', function($scope, formState) {
  $scope.formState = formState;
});

通过 ng-model 指令将提供者值的任何属性挂钩到输入元素。

<input type="text" ngModel="formState.searchFilter"/>

现在每次用户离开并重新进入此视图时,UI的状态都保持不变。您可以根据需要向状态添加任意数量的数据,如果需要,甚至可以在多个控制器之间共享。

提供商类型

创建提供者值有多种方法:工厂,服务,价值,常数和提供者。如果您想要更多地控制状态,例如状态管理,您可以使用其他选项之一。可以找到更多信息here

要对话或不对话

在传统网站中,在对话框中显示详细信息是“便宜的”。在后台跟踪状态的技巧。当然,这仍然是Angular的一个选项,但是没有必要。在UX视图中,对话框&#34;未完成&#34; 并且应尽可能避免,但它也会带来响应能力方面的痛苦打印

Plunker示例

一些代码示例在控制器/视图之间共享状态。