Access parent state controller from nested state in angularui

Question

I have defined nested states in my project:

        $stateProvider
    .state("MultiStepForm", {
        url: "/Sensor/MultiStepForm",
        templateUrl: "/app/MultiStepForm/MultiStepForm.html",
        controller: "MultiStepFormController",
        controllerAs: "MultiStepLogic"
    })
        .state('MultiStepForm.step1', {
            url: '/step1',
            templateUrl: '/app/MultiStepForm/NestedViews/FormStep1.html',
            controller: "MultiStepLogicStep1Controller",
            controllerAs: "Step1"
        })
        .state('MultiStepForm.step2', {
            url: '/step2',
            templateUrl: '/app/MultiStepForm/NestedViews/FormStep2.html',
            controller: "MultiStepLogicStep2Controller",
            controllerAs: "Step2"
    })
        .state('MultiStepForm.step3', {
            url: '/step3',
            templateUrl: '/app/MultiStepForm/NestedViews/FormStep3.html',
            controller: "MultiStepLogicStep3Controller",
            controllerAs: "Step3"
        });

In MultiStepForm state I have defined this property:

var self = this;
this.data = "someObject";

In MultiStepForm.step3 state controller(Step3) I want to access property that defined in parent state controller:

this.data = "some data from MultiStepForm.step3 state"

My question is how can I access parent property from nested state controller?

I don't believe this is a dupe, as Angular v2 is moving towards isolated scope, so a $scope-based answer is probably not the right one. My answer below solves the problem without using $scope. — James Gentes, Aug 17 '15 at 17:29

score 1 · Accepted Answer · answered Aug 17 '15 at 16:04

You need to 'resolve' that data before injecting it into the controller. If it is resolved at the parent, it will be available to the children.

Like this:

$stateProvider
    .state("MultiStepForm", {
        url: "/Sensor/MultiStepForm",
        templateUrl: "/app/MultiStepForm/MultiStepForm.html",
        controller: "MultiStepFormController",
        controllerAs: "MultiStepLogic",
        resolve: {
          your_custom_data: ['$stateParams', 'another_service',
                function($stateParams, another_service) {
                    //you can use $stateParams or other services here as needed to get the data you want
                    return the_value_of_your_custom_data;
                }],
    })

Then in your controller:

angular
    .module('your_app')
    .controller('MultiStepLogicStep3Controller', MultiStepLogicStep3Controller);

function MultiStepLogicStep3Controller($state, your_custom_data) {
    //access your $state or custom data here
    this.custom_data = your_custom_data;
}

do I have to make injection dependency like that: .controller('MultiStepLogicStep3Controller', ["your_custom_data",MultiStepLogicStep3Controller]); — Michael, Aug 17 '15 at 16:23

Access parent state controller from nested state in angularui

1 Answers1