0

I'm having difficulties figuring how to access child scope data. I'm using routes and ui-views to create a flow in creating a project, I have the "Wizard" which is the parent, and few more children states, each has different controller.

This is my "Wizard.html" file with ui-view for the children states.

<div class="header">
    <button ng-click="someFunction()">Back</button>
    <button ng-click="createProject()">Next</button>
</div>

<div class="wizard-children-view" ui-view></div>

<div class="footer">
</div>

these are the routes:

.state('wizard', {
    url: '/wizard',
    abstract: true,
    views: {
        'wizard': {
            templateUrl: 'wizard.html',
            controller: 'WizardController'
        }
    }
})
.state('wizard.project', {
    url: 'project',
    controller: 'ProjectController',
    templateUrl: 'project.html'
})
.state('wizard.aboutus', {
    url: 'aboutus',
    controller: 'AboutUsController',
    templateUrl: 'aboutus.html'
})

In my wizard's header (which is the parent) i have a top bar with "Back" and "Next" action buttons that stays on the screen all the time. I'm trying to use those buttons to access and do some stuff in one of the children. For an example, I want to have the "Next" button call to a function that validates a form inside the child view and creates a new project, but the problem is that the button with ng-click="createProject()" is in the parent scope and all the form's data is in the child scope, so it's undefined.. Can it be done?

Panda
  • 1,231
  • 18
  • 27
yl2015
  • 371
  • 1
  • 4
  • 18
  • You can find answer which is already present on stackoverflow. http://stackoverflow.com/questions/13428042/angularjs-access-to-child-scope – bhushanRJ Dec 22 '15 at 10:19

1 Answers1

0

You can use $emit from child controller:

$scope.$emit("foo", {name: "bar"});

Now, in your parent controller:

$scope.$on("foo", function(e, data) {
    // data.name == "bar"
});

https://docs.angularjs.org/api/ng/type/$rootScope.Scope