AngularJS UI-Router nested state view in table row (inline edit) - angularjs

Question

Working on an AngularJS + UI-Router project. Got a task with these (simplified here) requirements:
display a list of items in a table with Edit button at the end of the table row
clicking Edit button should turn a table row into item edit form (inline edit)
Item list and item edit views should be accessible via url.
So I have defined my states:
// app.js
$stateProvider
.state("list", {
url: "/",
component: "listComponent"
})
.state("list.edit", {
url: "/{id}/edit",
component: "editComponent"
});
}
ListComponent template looks like this:
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th> </th>
</tr>
<!-- Hide this row when NOT in edit mode -->
<tr ng-repeat-start="item in $ctrl.items" ng-if="$ctrl.editIndex !== $index">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>
<button type="button" ng-click="$ctrl.onEditClick($index, item.id)">Edit</button>
</td>
</tr>
<!-- Show this row when in edit mode -->
<tr ng-repeat-end ng-if="$ctrl.editIndex === $index">
<td colspan="3">
<ui-view></ui-view>
</td>
</tr>
</table>
And main parts from ListComponent itself:
function ListController($state) {
this.editIndex = null;
this.items = [
{ id: 1, name: "Y-Solowarm" },
// ...
{ id: 10, name: "Keylex" }
];
this.onEditClick = function(index, id) {
this.editIndex = index;
$state.go("list.edit", { id: id });
};
}
Problem:
When I was working on EditComponent I noticed that it initiates http requests twice. After a couple of hours later I came up with such EditComponent that showed what actually was happening:
function EditController() {
// random number per component instance
this.controllerId = Math.floor(Math.random() * 100);
this.$onInit = function() {
console.log("INIT:", this.controllerId);
};
this.$onDestroy = function() {
console.log("DESTROY:", this.controllerId);
};
}
Console showed this output:
DESTROY: 98
INIT: 80
DESTROY: 80
INIT: 9
When clicking Edit for a second time this output shows that
EditComponent#98 is destroyed as we navigate away from it (expected)
EditComponent#80 is created and immediately destroyed (unexpected)
EditComponent#9 is created as we are now 'editing' new item (expected)
This just shows me that many <ui-view>s together with ng-ifs does not play very nice but I have no idea how to fix that.
One thing that I have tried was I created one <ui-view> in ListComponent and was moving it around on ui-router state change by means of pure javascript. But that did not work as I soon started getting errors from ui-router's framework that were related to missing HTML node.
Question:
What am I doing wrong here? I think that angular's digest cycle (and related DOM changes) end later than ui-router starts transitions and related component creation and destruction and that might be a reason of EditComponent#80 being created and quickly destroyed. But I have no idea how to fix that.
Here is a codepen showing what is happening:
https://codepen.io/ramunsk/project/editor/AYyYqd
(don't forget to open developer console to see what's happening)
Thanks

Answer 1

Let's say you're switching from index 2 to index 3. I think this might be what is happening:
The ui-view at index 2 is currently active. In the click handler you call state.go and the ui-view at index 2 briefly receives the updated state parameter id: 3. Then it is destroyed when the ng-if takes effect and the ui-view at index 3 is created.
Change your code so it destroys the ui-view at index 2 first. Add a timeout so it calls state.go shows the second ui-view in the next digest cycle.
this.onEditClick = function(index, id) {
this.editIndex = null;
$timeout(() => {
this.editIndex = index;
$state.go("list.edit", { id: id });
});
};
https://codepen.io/christopherthielen/project/editor/ZyNpmv