3

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

这是场景：

带有标签的人员详细信息编辑器：

  • 选项卡 1：基本人员信息 @ ui-view="basic"
  • 选项卡 2：地址网格 -> 编辑地址状态 @ ui-view="addresses"
  • 选项卡 3：联系人网格 -> 编辑联系人状态 @ ui-view="contacts"

映射：

.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'
   }
 }
})

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

因此，当用户从网格中编辑地址时，“order.person.address”状态被启用，并且地址网格槽被 addressEditor.html 替换。

问题是当地址编辑器启用时，用户在另一个选项卡中单击以编辑网格中的联系人。启用“order.person.contact”后，将退出“order.person.address”并重新加载地址网格。

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

我尝试启用 ui-router-extras 并用“sticky : true”标记状态，但它确实没有任何区别。

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

谢谢你们

4

0 回答 0