Page redirect in Angular/MVC app

Question

I have a button in my view that I need to redirect me to a page to edit the element it is associated with.

Here is the button - pretty straight forward.

<button type="button" class="btn btn-default" ng-click="edit(x.TemplateStepID)"><span class="glyphicon glyphicon-edit"></span></button>

Here is the function in my angular controller.

$scope.edit = function (e) {                
            TemplateService.editTemplateStep(e)
            .success(function (data) {

            })
            .error(function (error) {

            });
        };

and the function in the app.factory:

TemplateService.editTemplateStep = function (stepID) {
            alert(stepID);                
            return $http.get('@Url.Action("EditTemplateStep", "TemplateStep")', stepID);
        }

Now I can get the data to pass all the way to the editTemplateStep function. But I cannot figure out how to get that info (stepID) to get passed to an MVC controller function so I can redirect to the edit page of the element the button is associated with.

New to Angular and MVC for that matter. Any help will be greatly appreciated.

Answer 1

Save the $scope.edit 's parameter and use it when you call the reDirect function:

$scope.reDirect(stepId, data) {
   //do the redirect
};    
$scope.edit = function (e) {
     var stepId = e;                
     TemplateService.editTemplateStep(e)
         .success(function (data) {
             //Call the redirect function
             $scope.reDirect(stepId, data);
         })
         .error(function (error) {

         });
    };

Update: deprecation notice

The .success and .error methods of the $http service have been deprecated. Instead use the .then and .catch methods.

$scope.edit = function (e) {
     var stepId = e;                
     TemplateService.editTemplateStep(e)
         .then (function (result) {
             //Call the redirect function
             $scope.reDirect(stepId, result.data);
         })
         .catch (function (error) {
             //log error
         });
    };

Notice that .then returns data differently than the .success method.

For more information on the deprecation of .success , see AngularJS $http service API Reference .