Question

我是关于stackoverflow的新手，也是AngularJS的新手。

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

我想使用Controller：DateCtrl在一个模板（date.html）中更改日期，并使用Controller：GEOCtrl更改另一个模板（geo.html）中的GEO位置。

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

我可以看到日期模板和GEO模板中的更改很好，但在更改日期和地理位置模板后，我无法弄清楚如何在sun.html模板中更新我的应用程序。

我一直在尝试在SunListCtrl控制器中使用$ 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中，如果你想在控制器之间进行通信，你应该使用服务。

创建一个服务，让每个控制器（geo和date）在服务中设置值，然后控制它返回到你在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控制器使用的列表。该服务还广播更新，告知控制器该列表已更新。

希望有所帮助。

更新另一个控制器中的角度离子视图

1 个答案: