在 Angular 中共享强循环集合

Question

我的应用程序中有两个控制器。一个菜单控制器和一个联盟控制器。菜单控制器存在于主索引.html页面上。联盟控制器管理联盟特定页面集。

当应用程序启动时，MenuController 会加载所有可用的联赛，通过我与 Strongloop 放在一起的 restful API 在每个联赛的页面顶部的下拉列表中创建一个条目，以便用户可以快速跳转到它。

我通过 create-league.client.view.html 模板创建联赛，该模板由 LeagueController 控制。

下面是菜单控制器代码：

angular.module('app')
.controller('MenuController',
['$scope', '$state', 'League', function ($scope, $state, League) {
$scope.leagues = [];
function getLeagues() {
  League
    .find()
    .$promise
    .then(function (results) {
      $scope.leagues = results;
    });
}
getLeagues();
}]);

下面是联盟控制器

angular.module('app')
.controller('LeagueController', ['$scope', '$state', 'Leagues',
function($scope,$state, League) {
$scope.leagues = [];
$scope.addLeague = function() {
  League
    .create($scope.newLeague)
    .$promise
    .then(function(result) {
      $scope.newLeague = '';
      $scope.leagueForm.name.$setPristine();
      $('.focus').focus();
      getLeagues();
    });
};
function getLeagues() {
  League
    .find()
    .$promise
    .then(function(leagues) {
      $scope.leagues = leagues;
    });
}
getLeagues();
$scope.removeLeague = function(item) {
  League
    .deleteById(item)
    .$promise
    .then(function() {
      getLeagues();
    });
};
}]);

在这两种情况下，我都使用强循环 lb 服务.js通过运行生成lb-ng server/server.js client/js/services/lb-services.js

问题在于为每个控制器创建的 $scope.leagues 显然是独立的，但我无法在用户创建新联赛时更新 MenuControllers 联赛数组，因此顶部的下拉列表不会更改。

我试图创建一个依赖于 lb-services.js 文件的服务，但无济于事。

我已经用谷歌搜索了我能找到的每个在控制器之间共享数据的示例，但我无法让其中任何一个工作。任何帮助将不胜感激。我是一名 Java 开发人员，试图掌握 AngularJS，并且正在努力解决角度房屋和封装数据的方式。我可以看到当它正确完成时它是多么有效，我只是还没有那个"尤里卡！！"的时刻。

谢谢马克。

*************溶液大家好感谢保罗在下面的帮助，我能够想出一个解决方案。

我创建了一个共享联盟服务，该服务将生成的联盟服务注入其中。然后将共享联盟服务注入到两个控制器中。控制器保留对共享联盟服务对象本身的引用，而不是对基础联盟数组的引用。然后在模板中，ng-repeat属性绑定到SharedLeagues.getLeagues((方法。

共享联盟服务.js angular.module('app'(.service('SharedLeagues'， function(League( {

var leagues= {};
return {
  retrieveLeagues: function() {
    League
    .find()
    .$promise
    .then(function(foundLeagues) {
      leagues = foundLeagues;
    });
},
getLeagues: function() {
  return leagues;
},
setLeagues: function(leaguesToSet) {
  // setter
  leagues = leaguesToSet;
}
}
});

MenuController.js通过在构造时调用后端来初始化SharedLeagues底层联盟数组。

angular.module('app')
  .controller('MenuController',
  ['$scope', '$state', 'SharedLeagues', function ($scope, $state, SharedLeagues) {
SharedLeagues.retrieveLeagues();
$scope.SharedLeagues = SharedLeagues;
}]);

LeagueController 有添加和删除联盟的方法。作为回调的一部分，调用 SharedLeagues setLeagues 方法，该方法也会更新 MenuController 的绑定。

角 .module('app'( .controller('LeagueController'， ['$scope'， '$state'， 'SharedLeagues'， 'League'， function($scope， $state， 共享联盟， 联盟( {

$scope.SharedLeagues = SharedLeagues;
$scope.addLeague = function() {
  League
    .create($scope.newLeague)
    .$promise
    .then(function(createdLeague) {
      $scope.newLeague = '';
      $scope.leagueForm.name.$setPristine();
      $('.focus').focus();
      var leagues = SharedLeagues.getLeagues();
      leagues.push(createdLeague)
      SharedLeagues.setLeagues(leagues);
    });
};
$scope.removeLeague = function(item) {
  League
    .deleteById(item)
    .$promise
    .then(function() {
      SharedLeagues.retrieveLeagues();
    });
};
}]);

联赛视图绑定到共享联赛，并列出新创建的联赛以供删除，如下所示

<div class="list-group col-lg-2">
     <a class="list-group-item" ng-repeat="league in SharedLeagues.getLeagues()">{{league.name}}  at {{league.venue}}&nbsp;
     <i class="glyphicon glyphicon-remove pull-right"
     ng-click="removeLeague(league)"></i></a>
</div>

菜单视图绑定到共享联盟，如下所示

<ul class="dropdown-menu">
    <li ng-repeat="league in SharedLeagues.getLeagues()"><a href="/edit/{{league.id}}">{{league.name}}</a></li>
    <li class="enabled"><a href="/#/leagues/create">Create new League...</a></li>
</ul>

希望

这有助于其他希望完成类似任务的人。非常感谢保罗的帮助！

马克。

Answer 1

服务是在两个控制器之间共享数据的好方法，下面是它的工作原理示例：

创建服务：

app.service('SharedData', function() {
  var data = [1,2,3,4,5,6];
  return {
    getData: function() {
      // getter
      return data;
    }, 
    setData: function(toSet) {
      // setter
      data = toSet;
    }
  }
});

然后将服务注入到两个控制器中：

app.controller('yourCtrl', function($scope, SharedData) {
...

然后，您可以从任一控制器获取/设置数据，这些数据将反映在另一个控制器中：

// in the controller
...
SharedData.setData('somevalue');
var someVal = SharedData.getData();
... 

这是这个想法的一个基本工作示例： http://plnkr.co/edit/Yt2t6D7P29ytCm4tyQn9?p=preview