javascript - $watch 和 2 个 Controller

Question

上下文

我有 2 个 View 和 3 个 Controller 。

我想要什么:当我单击“settings.html”中的按钮时，我想更新“settings.js”中的变量“shopMarkers”(变量在“main.js”中定义)，并且我还希望自动在“map.js”中更新一个对象。使用“shopMarkers”的新值更新“map.js”，以在“map.html”中的 map 中显示标记。

Settings.html

<div class="settings">

  <div class="row">

    <div class="question">
      Show shops ?
    </div>

    <div class="switch">
      <input id="toggle-1" class="toggle toggle-round" type="checkbox" ng-click="toggleShops()">
      <label for="toggle-1"></label>
    </div>

  </div>

</div>

Settings.js

'use strict';

/**
 * @ngdoc function
 * @name frontEndOpenEatApp.controller:SettingsCtrl
 * @description
 * # SettingsCtrl
 * Controller of the frontEndOpenEatApp
 */
angular.module('frontEndOpenEatApp')
  .controller('SettingsCtrl', ['$scope', 'shops', function ($scope, shops) {

    $scope.toggleShops = function() {
      if ($scope.$parent.shopMarkers.length == 0){
        shops.getShops().then(
          function (data){
            createMarkersForShops(data);
          }, function (msg) {
            console.log(msg);
          }
        );
      }
      else {
        $scope.$parent.shopMarkers = [];
      }
    };

    var createMarkersForShops = function (shops){
      var markers = [];
      for (var shop in shops) {
        var marker = {
          position : new google.maps.LatLng(shops[shop].latitude,shops[shop].longitude),
          title : shops[shop].description
        };
        markers.push(marker);
      }
      $scope.$parent.shopMarkers = markers;
    };

  }]);

ma​​p.html

<div id="loader" class="animated fadeIn">
  <i class="fa fa-cog fa-spin"></i>
</div>

<div id="map-canvas"></div>

ma​​p.js

'use strict';

/**
 * @ngdoc function
 * @name frontEndOpenEatApp.controller:MapCtrl
 * @description
 * # MapCtrl
 * Controller of the frontEndOpenEatApp
 */
angular.module('frontEndOpenEatApp')
  .controller('MapCtrl', ['$scope', 'shops', '$timeout', function ($scope, shops, $timeout) {

    var map;
    /**
     * Initialisation de la carte google map.
     */
    function initialize () {
      var mapOptions = {
        zoom: 18,
        center: new google.maps.LatLng(48.8879996, 2.2882407)
      };

      map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

    }

    $scope.$parent.$watch($scope.shopMarkers, updateShopsMarkers, true);

    function updateShopsMarkers (){
      for (var shop in $scope.$parent.shopMarkers){
        var marker = new google.maps.Marker($scope.$parent.shopMarkers[shop]);
        marker.setMap(map);
      }
    }

  }]);

ma​​in.js

'use strict';

/**
 * @ngdoc function
 * @name frontEndOpenEatApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the frontEndOpenEatApp
 */
angular.module('frontEndOpenEatApp')
  .controller('MainCtrl', ['$scope', function ($scope) {
    $scope.shopMarkers = [];
  }]);

我希望我正确描述了我的问题。

PS:“商店”是我创建的一项服务，但我认为没有必要对其进行更多描述。我使用一些谷歌地图功能，但这也不是这里的问题，你可以忘记这些功能。我的问题实际上是关于从另一个子 Controller 更新的父 Controller 中的 $watch 。最后，我对任何错误的拼写表示歉意。

Answer 1

您可以使 shopMarkers 变量在 $rootScope 中可用，如果发生任何更改，它也会相应更改。

所以我建议注入(inject) $rootScope 服务并使用 $rootScope 定义变量。

即

 $rootScope.shopMarkers = [];