AngularJS, passing data to a stateProvider OnEnter function to populate a modal

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;
        }
    },

Answers


To pass params to a state you need to define this params in url options of the state. If you don't want, you can define params in params option:

$stateProvider.state('edit', {
    url: '/edit',
    params: {
        login: null,
        full_name: null,
        member_since: null
    },
    onEnter: function($stateParams, $state, $modal) {
        // ...
    }
});

Need Your Help

saveas dialogue in Servlet

javascript jquery servlets

I found many of the answers in these forums very useful for me but would request you to check this issue of mine.

What causes this deadlock in my Ruby `trap` block?

ruby multithreading signals deadlock fork

I'm reading through Jesse Storimer's excellent book, Working with Unix Processes. In a section on trapping signals from child processes which have exited, he gives a code sample.