Angularjs depending on parent scope

Question

While building an application using AngularJs I asked my self if the following is good practice

I have "AppController" and every other controller is child of it. AppController has something like this.

$scope.layout = { sidebar: false, searchbar: true};

Now, child controllers should be able to change these values:

$rootScope.sidebar = true;

In this case, my child module is totally dependent on root controller and if I want this child controller works inside some other application I have to make sure parent controller of that other app always have $scope.layout object. Is this good practice? Would it be better to build layout module used by both, parent and child controllers? Like code bellow:

angular.module("app.ui", [])
  .factory("Layout", [function(){
     var _sidebar = false;
     var searchbar = true;


     var sidebar = function(flag){
        if(flag !== undefined) _sidebar = flag;
        return _sidebar;
     }

     var searchbar = function(flag){
        if(flag !== undefined) _searchbar = flag;
        return _searchbar;
     }

return {
   sidebar : sidebar,
   searchbar : searchbar
}
}])

if you want to build very modular and adaptive Apps, I would suggest you try out the directive controller. They have own scopes and you can reuse them in nearly every context. — Heinrich
– Heinrich, Commented Oct 28, 2012 at 18:44
I think it is better in your second option, by using service to build your global variable. — maxisam
– maxisam, Commented Oct 29, 2012 at 5:53
Do whatever you find to be easiest to maintain. Every proposed implementation in the OP is fine. — Ben Lesh
– Ben Lesh, Commented Oct 29, 2012 at 12:47

Tim Stewart · Accepted Answer · 2012-10-29 05:52:24Z

3

Whilst there may be other architectural approaches to what you want to do (e.g. look into the documentation on the scope property of directive declarations and its facilities for binding specific properties in the parent scope using @, = and &), generally Services are indeed a good option for sharing access to common data. You could simplify it a bit, if you don't have extra logic that must happen when the values are updated:

angular.module("app.ui", [])

.service("Layout", function() {
  this.sidebar = false;
  this.searchbar = true;
})

If you inject this service into your controllers and add it to their scope, you can update it and listen for changes like this:

.controller("AppCtl", function($scope, Layout) {
  $scope.Layout = Layout;

  // Method called by a search button, say
  $scope.search = function() {
    Layout.searchbar = true;
  }

  $scope.$watch("Layout.searchbar", function(newVal, oldVal) {
    // Do something in this scope if value has been changed from elsewhere
  });

});

answered Oct 29, 2012 at 5:52

Tim Stewart

7596 silver badges8 bronze badges

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

1 Comment

Andrej Kaurin Over a year ago

I used Tim solution. Not sure if should mark it as answer since there are many solutions for this and I just used this?

user1720074 · Accepted Answer · 2014-09-02 08:32:19Z

0

You can try this approach where you create a directive which triggers the scroll on click. Plunker

answered Sep 2, 2014 at 8:32

user1720074

Collectives™ on Stack Overflow

Angularjs depending on parent scope

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related