AngularJS - Share data between two controller, what's wrong?

Question

I'm having a problem sharing data between controllers, I used a service, seems working but something doesn't work as it should.

My problem is: When I click a row (in the ng-repeat part), it fires correctly service function (ui_mgmt), but it doesn't update ui_controller(controller) $scope.show_details var!

JS Code

ui_service_f = function() {
    //Service which should update Controller 1 var
    this.show_details = "-1";
    this.ui_mgmt = function(det,data) {
        this.show_details = 1;
    };
};
ui_controller =function($scope,ui_service) { 
    //Controller1
    //I think this part is bugged      
    $scope.show_details = ui_service.show_details;
    $scope.sub_bottom_menu = ui_service.sub_bottom_menu;
};
sim_list_placer =function($scope,service_sim,ui_service) {
    //Controller2
    $scope.ui_mgmt = function(a,b) {
        ui_service.ui_mgmt(a,b);
    };
};

HTML

<div ng-controller="sim_list_placer">
    <button ng-click="reload_sim_list()">Reload</button>
    <table class="td_mc_table">
        <thead>
            <td>pk</td><td>ICCID</td><td>Operatore</td>
            <td>Numero Dati</td><td>PIN</td><td>PUK</td>
            <td>Contratto</td><td>Costo</td><td>APN</td><td>Attivazione</td>
        </thead>
        <tbody>
            <tr ng-repeat="sim in sim_list" ng-click="ui_mgmt(1,sim)">
                <td>{{ sim.pk }}</td>
                <td>{{ sim.sim_iccid }}</td>
                <td>{{ sim.sim_operatore }}</td>
                <td>{{ sim.sim_ndati }}</td>
                <td>{{ sim.sim_pin }}</td>
                <td>{{ sim.sim_puk }}</td>
                <td>{{ sim.sim_contratto }}</td>
                <td>{{ sim.sim_costo }}</td>
                <td>{{ sim.sim_apn }}</td>
                <td>{{ sim.sim_data_attivazione }}</td>
            </tr>   
        </tbody>
    </table>
</div>
<div ng-controller="ui_controller">
    {{show_details}}
    <div ng-if="show_details==1"  class="td_mc_rightbar" >
        Dettagli...
        <div ng-switch="sub_bottom_menu">
            <div ng-switch-when="sim_mgmt">
                Blablablabla
            </div>              
        </div>
    </div>
</div>

I'm I missing something or....???

Thank you in advice :)

Andrea

If it was me, I would not pass scope to the service,.. Rather I would have methods returning the updated data $scope.someVar = service.getVar(). Also, as you do an implicit update of the data of another scope, I think you might need to do $scope.digest() — cYrixmorten
– cYrixmorten, Commented Dec 1, 2015 at 7:20

user4872511 · Accepted Answer · 2015-12-01 08:02:24Z

2

The initial value of show_details is being copied into the controller, but it's not being updated because numbers in JavaScript are passed by value, not by reference.

Since objects are pass-by-reference, an easy solution is to put the values you want to bind within an object:

ui_service_f = function() {
    this.options = {
         show_details: "-1";
    };
};
ui_controller =function($scope,ui_service) {     
    $scope.options = ui_service.options;
};

Then in your controller:

<div ng-if="options.show_details==1"  class="td_mc_rightbar" >
<!-- ... -->
</div>

This works because the line $scope.options = ui_service.options creates a reference the options object in the scope, which is then checked for updates in the usual Angular digest cycle.

answered Dec 1, 2015 at 8:02

user4872511

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

Comments

AlexD · Accepted Answer · 2015-12-01 07:59:48Z

2

When passing show_details you are passing its value and not a pointer to the object since its a simple object. Adding a single layer to it will do the trick.

this.show_details = {value: "-1"};

Here is a fiddle: http://jsfiddle.net/bwdpft1y/

answered Dec 1, 2015 at 7:59

AlexD

4,3306 gold badges42 silver badges66 bronze badges

Collectives™ on Stack Overflow

AngularJS - Share data between two controller, what's wrong?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related