troch / angular-multi-step-form

An angular module for creating multi step forms / wizards
http://troch.github.io/angular-multi-step-form
ISC License
144 stars 44 forks source link

Access $nextStep() in controller function #44

Closed jpduckwo closed 8 years ago

jpduckwo commented 8 years ago

Hi,

I'm wondering if it's possible to trigger the $scope.$nextStep() and other step functions inside the controller. When I do this it complains that it is undefined. I've tried injecting in various step scopes etc but it doesn't seem to help.

On of my use cases for this would be to write generic next and back functions that can be embedded in a partial for a menu that can be used across different types of multi step forms. Then I would define different step flows by looking up the step number and figuring out the next step base on either some variables in the step config or something like that.

If I can figure out how to call $nextStep in the controller triggered by a wrapping function, I think I'll be able to figure the rest out! Many thanks on your great work with this module it's awesome.

E.g.

myApp.controller('AddController', ['$scope', function($scope) {
    init();

    function init() {
        $scope.model = {};

        $scope.steps = [{
            templateUrl: 'step1.html',
            title: 'asdf'
        }, {
            templateUrl: 'step2.html',
            title: 'qwer'
        }, {
            templateUrl: 'step3.html',
            title: 'zxvc'
        }];
    }

    $scope.selectPerson = function(person) {
        $scope.model.person = person;
        $scope.$nextStep();
    };
}]);

In the view:

...
<div class="peoplelist">
    <div ng-repeat="person in peopleList|filter:search" class="person" ng-click="selectPerson(person); $nextStep();"> /* I don't want to have to call $nextStep() here, and have it trigger by the selectPerson() method */
</div>
...
jpduckwo commented 8 years ago

So I just got further on this with more reading. I created a separate controller for the step and injected multiStepFormInstance into that. I was able to call nextStep() and access and manipulate $scope data from the controller managing the steps. When I tried to follow the method from the saving-data example it complained that multiStepFormScope doesn't exist... however it doesn't appear I need to do this?

.controller('IsolatedStepCtrl', [
    '$scope',
    'multiStepFormScope',
    function ($scope, multiStepFormScope) {
        $scope.model = angular.copy(multiStepFormScope.model);
        $scope.$on('$destroy', function () {
            multiStepFormScope.model = angular.copy($scope.model);
        });
    }
]);

Using AngularJS 1.5.5 if that helps...

troch commented 8 years ago

When I tried to follow the method from the saving-data example it complained that multiStepFormScope doesn't exist...

multiStepFormInstance, not multiStepFormScope :D.

however it doesn't appear I need to do this?

You don't have to inject multiStepFormInstance, $scope has the main methods from it (prefixed with $). So it depends on your use case.

I'm wondering if it's possible to trigger the $scope.$nextStep() and other step functions inside the controller.

If I can figure out how to call $nextStep in the controller triggered by a wrapping function

I'm not sure I fully understand what you are trying to accomplish. It seems you are trying to control the multi step form instance from outside the directive?

jpduckwo commented 8 years ago

Thank you kindly, you can close this one.