CODEWITHSUNDEEP
javascriptangularjs
Simple-Solution
Simple-Solution

Reputation: 4289

How to share $scope properties, not its value between two controllers in angularjs?

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!

Upvotes: 0

Views: 189

Answers (3)

Jan Jůna
Jan Jůna

Reputation: 5074

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)
})

Upvotes: 0

Marc Kline
Marc Kline

Reputation: 9409

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;
})

Upvotes: 3

mortsahl
mortsahl

Reputation: 602

<!-- 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.

Upvotes: 0

Related Questions