Обновление Углового иона в другом контроллере

Question

Im новый здесь, в stackoverflow и новом для AngularJS.

Я пытаюсь создать приложение для ионических приложений, и вот моя проблема.

Я хочу изменить дату в одном шаблоне (date.html) с помощью контроллера: DateCtrl и изменить местоположение GEO в другом шаблоне (geo.html) с помощью контроллера: GEOCtrl.

И когда я меняю дату и географическое местоположение, я бы хотел, чтобы мой список в третьем шаблоне (sun.html) обновлялся с помощью контроллера: SunCtrl.

Я вижу изменения в шаблоне даты и шаблоне GEO просто отлично, но я не могу понять, как обновить свой список в моем шаблоне sun.html, после изменения даты и шаблонов геопозиций.

Я пытался использовать $ scope. $ Watch в контроллере SunListCtrl и устанавливать $ scope. $ Apply в GEOCtrl и DateCtrl. Но не повезло.

Но как я могу получить свой список в шаблоне sun.html для обновления, каждый раз и изменения происходят в дате или местоположении GEO?

sun.html шаблона:

<ion-view view-title="Sun list"> 
    <ion-content> 
     <ion-list> 
      <ion-item ng-repeat="sun in sunList.sunlist"> 
       {{sun.title}} 
      </ion-item> 
     </ion-list> 
    </ion-content> 
</ion-view> 

geo.html:

Latitude: {{geo.latitude}}<br /> 
Longitude: {{geo.longitude}}<br /> 
City: {{geo.city}}<br /> 
Date: {{date.dato}}<br /> 

<div class="list"> 
    <label class="item item-radio" ng-repeat="area in areas"> 
     <input type="radio" name="group" ng-model="geo.city" value="{{area.city}}" ng-change="change({{area.id}})" > 
     <div class="item-content"> 
      {{area.city}} 
     </div> 
     <i class="radio-icon ion-checkmark"></i> 
    </label> 
</div> 

date.html

Latitude: {{geo.latitude}}<br /> 
Longitude: {{geo.longitude}}<br /> 
City: {{geo.city}}<br /> 
Date: {{date.dato}}<br /> 
<br /> 
<h3>Select date:</h3> 
<input type="text" ng-model="date.dato" /> 

<label class="item item-input"> 
    <span class="input-label">Date</span> 
    <input type="date" ng-model="date.dato"> 
</label> 

controller.js

angular.module('starter.controllers', []) 

    .controller('AppCtrl', function ($scope, $ionicModal, $timeout) { 

    }) 

    .factory('ActiveDate', function(){ 
     var date = this; 
     date.dato = new Date(); 
     return this; 
    }) 

    .factory('Geo', function(){ 
     var Geo = this; 
     Geo.latitude = "55.67610"; 
     Geo.longitude = "12.56834"; 
     Geo.city = "Copenhagen"; 
     return this; 
    }) 

    .factory('SunList', function(ActiveDate, Geo){ 
     // I need GEO location and date to calculate the sunrise 
     // I use this: https://github.com/mourner/suncalc 
     var geoTime = SunCalc.getTimes(ActiveDate.dato, Geo.latitude, Geo.longitude); 

     var sunList = this; 
     sunList.sunlist = []; 

     // I the original code I do some more - but this is the basic stuff. 
     for (i = 0; i < 12; i++) { 
      sunList.sunlist.push({ 
       title: 'Hour #' + i 
      }); 
     } 
     return this; 
    }) 

    .controller('SunListCtrl', function ($scope, ActiveDate, Geo, SunList) { 
     $scope.sunList = SunList; 
    }) 

    .controller('DateCtrl', function ($scope, $stateParams, ActiveDate, Geo) { 
     $scope.date = ActiveDate; 
     $scope.geo = Geo; 
    }) 

    .controller('GEOCtrl', function ($scope, ActiveDate, Geo) { 
     $scope.date = ActiveDate; 
     $scope.geo = Geo; 
     $scope.change = function (id) { 
      $scope.geo.city = $scope.areas[id].city; 
      Geo.latitude = $scope.areas[id].latitude; 
      Geo.longitude = $scope.areas[id].longitude; 
     }; 
     $scope.areas = 
      [ 
       {id: 0, city: "Copenhagen", latitude: "55.67610", longitude: "12.56834"}, 
       {id: 1, city: "New York", latitude: "40.71278", longitude: "-74.00594"}, 
       {id: 2, city: "Bangkok", latitude: "13.75633", longitude: "100.50177"} 
      ]; 
    }); 

Спасибо :-)

Answer 1

В общем, в AngularJS, если вы хотите установить связь между контроллерами, вы должны использовать сервис.

Создайте сервис и установите для каждого из ваших контроллеров (гео и дату) значения в службе, которые затем будут управлять значением, которое оно возвращает в SunListCtrl, которое вы используете в ng-repeat.

Я разместил полную демонстрацию двух контроллеров, говорящих на услугу, которая затем используется для получения данных списка для третьего контроллера здесь: http://plnkr.co/edit/ZKqVqV?p=preview

Служба выглядит следующим образом:

app.service('List', function($rootScope, $log) { 
    service = {}; // the service object we'll return 

    var dateValue = 'date'; 
    var geoValue = 'geo'; 
    var theList = []; 

    service.setGeo = function(data) { 
    geoValue = data; 
    updateList(); 
    } 

    service.setDate = function(data) { 
    dateValue = data; 
    updateList(); 
    } 

    function updateList() { 
    theList = [dateValue, geoValue]; 
    $rootScope.$broadcast('updatedList'); // broadcasts the update to listeners 
    } 

    service.getList = function() { 
    return theList; 
    } 

    return service; 
}); 

В основном обновления к дате или геоконтроллерам передаются службе со списками вызовов List.setGeo (data) и List.setDate (данных). Эти вызовы обновляют локальные переменные службы, а затем восстанавливают список, используемый контроллером SunList. Служба также передает обновление, информирующее контроллер о том, что список обновлен.

Надеюсь, что помогает.