您希望能够做的是:
我在shell中有一个活动状态'order.detail',这些细节会在每个产品系列中提供一个链接,导致'product.detail'状态,这也是一个可以在shell中显示的状态。 / p>
但是这个链接应该在对话框中将状态'product.detail'显示为一个框架而不改变当前位置并保持shell中的活动状态不变。
同样是'product.detail'状态,用作shell的主视图,并允许它们重用,你的模板应该用'div'对话模板包装。
我的意思是,允许在不离开当前屏幕的情况下查看某些内容的详细信息,并使用相同的现有详细信息屏幕进行查看,或者仅允许使用现有视图的相关数据“向下钻取”。
答案 0 :(得分:1)
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; 并且应尽可能避免,但它也会带来响应能力方面的痛苦和打印。
一些代码示例在控制器/视图之间共享状态。