Not sure if this is possible or not, but I can't seem to get it to work.
Basic Premise
I would like to have a user click on an EDIT button in a table to open up a modal that is populated with the contents of the clicked on row.
Method
I would like to do this without using URL parameters. The API response that populated the table has already provided everything needs to populate the modal, so why pass an :ID in the URL only to make another API call to get the necessary data again?
Here is my table that the user would click on to start the process.
<tbody>
<tr ng-repeat="item in accounts">
<td><span class="label label-success">Active</span></td>
<td>{{item.login}}</td>
<td>{{item.full_name}}</td>
<td>{{item.member_since}}</td>
<td>Daily</td>
<td><a ng-click="showLinks(item)" class="btn btn-warning">LINKS</a></td>
<td><a ng-click="editAccount(item)" class="btn btn-primary">EDIT</a></td>
<td><a ng-click="deleteAccount(item)" class="btn btn-danger">DELETE</a></td>
</tr>
</tbody>
In my controller I have the following.
$scope.editAccount = function (item) {
console.log("Editing Account");
console.log(item);
$state.go('edit', item);
}
The console correctly prints out the object. All good at this point. I want to pass this selected item at this point to the stateProvider so that it can populate the modal in the onEnter function.
Notice that I have commented out the "return {login: 'TEST'}". If I leave this in, the modal populates correctly.
$stateProvider.state('edit', {
url: '/edit',
onEnter: function($stateParams, $state, $modal) {
console.log("Enter Edit");
$modal.open({
templateUrl: "views/account_edit.htm",
//params: ['login'],
resolve: {
item: function() {
console.log("Resolving Edit");
console.log($stateParams);
console.log($state.params);
console.log(this);
//return {login:"TEST"};
}
},
controller: ['$scope', 'item', function($scope, item) {
console.log("Controlling Edit");
$scope.item = item;
$scope.cancel = function() {
$scope.$close(true);
};
$scope.ok = function() {
$scope.$close(true);
};
}]
}).result.then(function(result) {
if (result) {
console.log("Acting on RESULT");
return $state.go("home");
}
});
}
});
What I can't seem to get working is how to access the ITEM passed in the $stage.go from within the $stateProvider. Anyone have any ideas? The documentation below suggests that I should be able to see the data in the $stateParams, but it is not there
go(to, params, options)
params(optional) – {object=} – A map of the parameters that will be sent to the state, will populate $stateParams. Any parameters that are not specified will be inherited from currently defined parameters. This allows, for example, going to a sibling state that shares parameters specified in a parent state. Parameter inheritance only works between common ancestor states, I.e. transitioning to a sibling will get you the parameters for all parents, transitioning to a child will get you all current parameters, etc.
**UPDATE
The only way I have found to make this work is to make the following updates.
$scope.editAccount = function (item) {
console.log("Editing Account");
console.log(item);
$state.params.item = item;
//$state.go('edit', item);
$state.go('edit');
};
resolve: {
item: function() {
return $state.params.item;
}
},
