如何在angularjs的两个控制器之间共享$ scope属性，而不是其值？

Question

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!

Answer 1

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

Answer 2

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

Answer 3

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