在另一个控制器中更新 Angular ion-view

Question

我是 Whosebug 的新手，也是 AngularJS 的新手。

我正在尝试构建 Ionic 应用程序，这是我的问题。

我想更改一个模板(date.html) 中的日期，使用控制器：DateCtrl，并更改另一个模板(geo.html) 中的日期，使用控制器：GEOCtrl。

当我更改日期和地理位置时，我希望使用控制器：SunCtrl 更新第三个模板 (sun.html) 中的列表。

我可以很好地看到日期模板和 GEO 模板的变化，但我不知道如何在日期和地理位置模板发生变化后更新 sun.html 模板中的列表。

我一直在尝试在 SunListCtrl Controller 中使用 $scope.$watch，并在 GEOCtrl 和 DateCtrl 中设置 $scope.$apply。但运气不好。

但是我怎样才能让我在 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 如果你想在控制器之间进行通信，你应该使用服务。

创建一个服务并让您的每个控制器（地理和日期）在服务中设置值，然后控制它的值 returns 到您在 ng-repeat 中使用的 SunListCtrl。

我已经发布了两个控制器与服务对话的完整演示，该服务随后用于获取第三个控制器的列表数据：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(data) 调用传递给服务。这些调用更新本地服务变量，然后重建 SunList 控制器使用的列表。该服务还广播更新，告诉该控制器列表已更新。

希望对您有所帮助。

在另一个控制器中更新 Angular ion-view

Update Angular ion-view in another controller

angularjs

angularjs-controller

angularjs-factory