AngularJS - Обмен данными между двумя контроллерами, что не так?

Question

У меня проблема с обменом данными между контроллерами, я использовал сервис, кажется, работает, но что-то не работает должным образом.

Моя проблема: Когда я нажимаю на строку (в части 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 копируются в контроллер, но он не обновляется, так как числа в JavaScript передается по значению, а не по ссылке.

Поскольку объекты проходят по ссылке, простое решение, чтобы поместить значения, которые вы хотите связать внутри объекта:

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

Тогда в контроллере:

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

это работает потому что строка $scope.options = ui_service.options создает ссылку на объект опций в области, который затем проверяется на наличие обновлений в обычном угловом digest cycle.

Answer 2

При прохождении show_details вы передаете его значение, а не указатель на объект, так как его простой объект. Добавление к нему одного слоя сделает трюк.

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

Вот скрипка: http://jsfiddle.net/bwdpft1y/