AngularJS Ui-router - 保持选项卡之间的子视图更改（粘滞状态）

Question

我正在努力尝试使用UI-ROUTER制作两个标签以保持独立行为。

以下是该方案：

带有标签的人员详情编辑器：

• 标签1：基本人信息@ ui-view =＆＃34;基本＆＃34;
• 标签2：地址网格 - ＆gt;编辑地址状态@ ui-view =＆＃34;地址＆＃34;
• 标签3：联系人网格 - ＆gt;编辑联系人状态@ ui-view =＆＃34;联系人＆＃34;

映射：

.state('order.person', {
 views : {
   'person@order' : {
     templateUrl : 'personTabs.html' // contains the 3 ui-view mentioned above
   },
   'basic@order.person' : {
     templateUrl: 'basicInfoForm.html'
   },
   'addresses@order.person' : {
    templateUrl: 'addressesGrid.html'
   },
   'contacts@order.person' : {
    templateUrl: 'contactsGrid.html'
   }
 }
})
.state('order.person.address', {
 views : {
   'addresses@order.person' : {
     templateUrl: 'addressEditor.html'
   }
 }
})
.state('order.person.contact', {
 views : {
   'contacts@order.person' : {
     templateUrl: 'contactEditor.html'
   }
 }
})

当＆＃39; order.person＆＃39;启用了状态，我们确实加载了三个选项卡，包括地址和联系人数据网格。

因此，当用户从网格中编辑地址时，＆＃39; order.person.address＆＃39; state已启用，地址网格槽由addressEditor.html替换。

问题在于启用了地址编辑器，而在另一个选项卡中，用户单击以从网格编辑联系人。当＆＃39; order.person.contact＆＃39;已启用，＆＃39; order.person.address＆＃39;退出并重新加载地址网格。

我希望用户能够独立显示/编辑地址和联系人记录。

我尝试启用ui-router-extras并使用＆＃34; sticky：true＆＃34;标记状态，但它确实没有任何区别。

使这项工作成功的诀窍是什么？

谢谢大家