0

I'm newbie to AJs, and I'm trying to share $scope.showdropdown directive with another controller so that the second controller can call this directive in its body.

this is what I want:

.controller('firstCtrl', function($scope){
    $scope.showdropdown = false; // this is part of this controller 

})

.controller('secondCtrl', function($scope){
   if(username and pass correct){
      $scope.showdropdown = true; // I want to call this here, but I can't do it bcoz its not part of the same controller!!! 
   }
})

I tried all sorts of thing, factory etc. and had no luck Can someone show me how can this be done please!

Simple-Solution
  • 4,209
  • 12
  • 47
  • 66
  • Are you overriding the first controller because you're naming them the same? – mortsahl Jun 06 '14 at 17:51
  • Is it just this one value you need to share between the two controllers? – Marc Kline Jun 06 '14 at 18:00
  • what about using $rootScope, which is what I use as my global variable keeper. – ganders Jun 06 '14 at 18:21
  • possible duplicate of [Angular: Share data between controllers](http://stackoverflow.com/questions/21919962/angular-share-data-between-controllers) – Marc Kline Jun 06 '14 at 18:25
  • Much of the Angular developer community considers it dogma that $rootScope should be avoided at all costs, citing similar reasons as to why you should avoid global variables in pure JS. Of course, we should all formulate our own educated opinions, but if one is not interested in doing so at the moment, the safest bet is to avoid $rootScope and consider alternatives. – Marc Kline Jun 06 '14 at 18:36
  • sorry i meant secondCtrl there :) – Simple-Solution Jun 06 '14 at 19:55
  • @MarcKline - yes, just one – Simple-Solution Jun 06 '14 at 19:56

3 Answers3

3

If it's only simple data that you need to share between the controllers (ie no functionality, validation, or other model logic), you can use a value service:

.controller('firstCtrl', function($scope, myVal){
    $scope.shared = myVal; // 'shared' on scope now references value service
    $scope.shared.showdropdown = false;

})
.controller('secondCtrl', function($scope, myVal){
   $scope.shared = myVal;
   if(username and pass correct){
      $scope.shared.showdropdown = true; // updates myVal value
   }
})
.value('myVal', {}) // register service, initializing with an object object

Demo

The concept is the same for a factory or service service type and the implementation is very similar. Go with one of these if you need to share functionality, not just data. Factory example:

.controller('firstCtrl', function($scope, MyFactory){
    $scope.shared = MyFactory;
    ...
})
.controller('secondCtrl', function($scope, MyFactory){
    $scope.shared = MyFactory;
    ...
})
.factory('MyFactory', function(){
    var obj = {
        //showdropdown: false
    };

    obj.someFunc = function(){};

    return obj;
})
Marc Kline
  • 9,399
  • 1
  • 33
  • 36
0
<!-- Nested Scopes -->
<div ng-controller="ParentCtrl">
<p>Parent Scope</p>
<ul>
    <li> {{ford}}</li>
    <li> {{chevy}}</li>
    <li>{{dodge}}</li>
</ul>

<div ng-controller="ChildCtrl">
    <p>Child Scope</p>
    <ul>
        <li> {{apple}}</li>
        <li> {{samsung}}</li>
        <li>{{motorola}}</li>
    </ul>

    <div ng-controller="AnotherChildCtrl">
        <p>2nd Child Scope</p>
        <ul>
            <li> {{boeing}}</li>
            <li> {{grumman}}</li>
            <li>{{lockheed}}</li>
        </ul>

        <p>Combination of three scopes</p>
        <ul>
            <li> From parent - {{ ford }}</li>
            <li> From child - {{ motorola }}</li>
            <li> From anotherChild  - {{ lockheed }}</li>
        </ul>

    </div>
</div>


The result looks like this …
Parent Scope
•   Mustang
•   Corvette
•   Charger
Child Scope
•   iPhone
•   Galaxy
•   MotoX
2nd Child Scope
•   747
•   F-14
•   F-35
Combination of three scopes
•   From parent - Mustang
•   From child - MotoX
•   From anotherChild - F-35

If you need to access a scope outside of the parent scope (in this example) – DON’T !!! Configure your code so that the scope you need is available in your current scope – or you might create a service to store values you’ll need later on. For instance. You might have a UserService. When someone logs in you save the user object to the UserService, then somewhere else when you need to get the user object you call the UserService.getCurrentUser() … don’t go trying to find it on some scope outside of your current heirarchy.

If you are writing a directive you will likely create an isolate scope. So, in your directive pass in as an argument any scope values you may need and place them in the isolate scope.

It is an extremely rare case where you will need to use $parent or $rootScope and should avoid their use 99.9999% of the time.

mortsahl
  • 602
  • 6
  • 18
0

Or.. you can use $rootScope if you want some shared states/methods in your app..

.controller('firstCtrl', function($rootScope){
    $rootScope.shared = 123;

})

.controller('secondCtrl', function($rootScope){
   console.log($rootScope)
})
Jan Jůna
  • 4,965
  • 3
  • 21
  • 27