javascript - AngularJS - 在两个 Controller 之间共享数据，怎么了？

Question

我在 Controller 之间共享数据时遇到问题，我使用了一项服务，它似乎可以正常工作，但有些地方无法正常工作。

我的问题是:当我单击一行(在 ng-repeat 部分)时，它会正确触发服务函数 (ui_mgmt)，但不会更新 ui_controller(controller) $scope.show_details var!

JS代码

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>

我是不是遗漏了什么或者...？？？

谢谢你的建议:)

安德里亚

Answer 1

show_details 的初始值被复制到 Controller 中，但它没有被更新，因为 JavaScript 中的数字是按值传递的，而不是按引用传递的。

由于对象是按引用传递的，所以一个简单的解决方案是将要绑定(bind)的值放在一个对象中:

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

然后在你的 Controller 中:

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

这是有效的，因为行 $scope.options = ui_service.options 在作用域中创建了一个选项对象的引用，然后在通常的 Angular digest cycle 中检查更新。 .