Passing data to out of scope variables in angularjs

Question

I need a guide for a clarification in angular controller scope.

My app has different controllers in controllers folder. And different pages for each controllers in pages folder. My point is how should I manage controllers for global stuff such as breadcrums which is in includes folder. The breadcrums are not belongs to any controller which I defined for each route.

The problem I faced is I need to change the breadcrum variables from each and every controllers.

So how can I pass data into breadcrums. Should I use globalScope?

You can have a main controller that deals with the parts of the page that aren't part of ng-view. The breadcrumbs will be part of the scope of this controller, and be inherited by the scope of all the view controllers. — JB Nizet
– JB Nizet, Commented Aug 14, 2014 at 20:04
So can I dynamically change its variables from ng-view controllers defined in route contollers? — Namal
– Namal, Commented Aug 14, 2014 at 20:34
Yes. scopes of sub-controllers inherit from the scope of their parent controller. Note that nothing prevents having a main controller and encapsulating the breadcrumbs in a service like Andrew suggests. — JB Nizet
– JB Nizet, Commented Aug 14, 2014 at 20:36

Andrew Sula · Accepted Answer · 2014-08-14 20:22:23Z

3

I would suggest using an AngularJS service, say a 'Breadcrumb' service. This service can keep track of the breadcrumb and each of your controllers can use the service to access the breadcrumb.

Here's a really basic example with a string for the breadcrumb.

var myApp = angular.module('myApp', []);
myApp.factory('Breadcrumb', function() {
    return {breadcrumbString: "Home > Page > SubPage"}
})

function PageCtrl($scope, Breadcrumb){
  $scope.breadcrumb = Breadcrumb;
}

function SubPageCtrl($scope, Breadcrumb){
  $scope.breadcrumb = Breadcrumb;
}

Here a factory has been used to create an instance of a service, as explained in the AngularJS docs:

Note that you are not registering a service instance, but rather a factory function that will create this instance when called.

For more information, I suggest you take a look at the following:

edited Aug 14, 2014 at 20:22

answered Aug 14, 2014 at 20:02

Andrew Sula

9398 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Explosion Pills Over a year ago

One of the main uses of Services is Controller-Controller communication

Namal Over a year ago

Thanks @Andrew. I'll check. So can I use a directive for breadcrump view & pass data to it from a service?

Andrew Sula Over a year ago

Yes. You can inject the service into a directive in the same way as you would inject it into a controller. Take a look at the accepted answer here: stackoverflow.com/questions/15569168/…

Andrew Sula Over a year ago

@Namal - No problem at all. Let me know if there's anything else you would like me to add to make the answer more useful.

Namal Over a year ago

@Andrew checkout JB's comment bottom of the question. What about your idea? I think that is correct. I should have a main controller because breadcrums are out of scope of controllers.

|

Collectives™ on Stack Overflow

Passing data to out of scope variables in angularjs

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related