current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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?

share|improve this question
1  
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 Aug 14 at 20:04
    
So can I dynamically change its variables from ng-view controllers defined in route contollers? –  Namal Aug 14 at 20:34
1  
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 Aug 14 at 20:36
    
Thanks @JBNizet –  Namal Aug 14 at 20:37

1 Answer 1

up vote 3 down vote accepted

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:

share|improve this answer
1  
One of the main uses of Services is Controller-Controller communication –  Explosion Pills Aug 14 at 20:02
    
Thanks @Andrew. I'll check. So can I use a directive for breadcrump view & pass data to it from a service? –  Namal Aug 14 at 20:06
1  
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 Aug 14 at 20:16
    
Thanks for the detail information @Andrew. –  Namal Aug 14 at 20:24
    
@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. –  Andrew Sula Aug 14 at 20:25

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.