Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →

I don't want to use a service or a factory and would like to pass for example an array of data. I would like to access data in my parent controller from my child component.

Factory and service are excluded since i eventually want to migrate my app to angular 2, and i don't want to use ngclick which seems inseperable with broadcast/up/on. If anyone knows how to pass data on the background (without user interaction, like input or ngclick) using broadcasting, it would work aswell :)

What are my options ? Thank you !

share|improve this question
    
Sorry to say, but you exclude a factory & service as a answer, although these service / factory - singleton approaches were born to do exactly that. Bad practice not to use them as solution. Maybe it has a reason? – daan.desmedt Aug 1 at 12:33
    
It's a HORRIBLE idea to discard factories and services, and you SHOULD do it. But if you absolutely HAVE to, you can use $rootScope. plnkr.co/edit/ZYFPsn0JMBNsiO0G4qNh – fraccus Aug 1 at 12:38
1  
It's because i eventually would like to migrate my app to angular 2, and therefore would like only to use controllers... Or am i going trying to hard for something too easy? – William D Aug 1 at 12:39
    
If you have a components based architecture then your approach is correct @William D – gyc Aug 1 at 12:40
    
use a flux store that is outside angular – Daniel_L Aug 1 at 12:41
up vote 1 down vote accepted

If you have nested components, you can access the parent's data with require

var child = {
    bindings: {},
    require: {
        parent: '^^parent'
    },
    controller: childController,
    templateUrl: 'child.template.html'
};

Now in your child controller you have access to an instance of the parent controller and thus can call methods and access it's properties:

this.parent.parentMethod();

You have some more detailed code in a previous answer here:

Where should I place code to be used across components/controllers for an AngularJS app?

Your other choices:

bindings

Just like directives' scope or bindToController you can bind data and methods through html attributes using the bindings propety of your component

<component-x shared="$ctrl.shared"></component-x>

var componentX = {
    bindings: { shared: '=' }
    ...

$rootScope

Never use it to store data. It works but it's not made for that purpose and will lead to unmaintainable code.

Services

It's a common misconception that shared data should be done through services. It was true and good practice before 1.5 though.

Controller inheritance

Another bad practice (imo). In a classic MVC app nested controllers can inherit parents with the $controller service:

.controller('MainController', function ($scope) {

    $scope.logMessage = function(message) {
        console.log("Message: " + message);
    }

})

.controller('ServicesController', function($scope, $controller) {
    $controller('MainController', {$scope: $scope});
});

Broadcast and emit Events

It's the way to go if the event you're broadcasting makes sense application wide (login, logout...etc.) If you're updating a variable in a component, don't use it.

share|improve this answer

I don't want to use a service or a factory and would like to pass for example an array of data

You can use localStorage/sessionStorage to store and fetch the data

share|improve this answer
1  
This could use a short example. – Mikko Viitala Aug 1 at 13:30

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.