在 Angular 中共享 strongloop 集合

Question

我的应用程序中有两个控制器。一个 MenuController 和一个 LeagueController。 MenuController 存在于主 index.html 页面上。 LeagueController 管理一组 League 特定页面。

当应用程序启动时，MenuController 会通过 restful api 加载所有可用的联赛用户可以快速跳转到它。

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

MenuController代码如下：

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();

}]);

下面是LeagueController

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();
    });
};
}]);

在这两种情况下，我都使用由运行生成的 strongloop lb-services.js lb-ng server/server.js client/js/services/lb-services.js

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

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

我用谷歌搜索了所有我能找到的在控制器之间共享数据的例子，但我无法让它们中的任何一个工作。任何帮助将不胜感激。我是一名 Java 开发人员，试图掌握 AngularJS 并且正在为 angular 容纳和封装数据的方式而苦苦挣扎。当它正确完成时，我可以看到它是多么有效我只是还没有 'Eureka!!' 那个时刻。

谢谢，马克.

***************解决方案大家好，多亏了下面保罗的帮助，我才能够想出一个解决方案。

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

SharedLeagues.service.js angular.module('app').service('SharedLeagues',函数(联赛){

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 有addLeague 和deleteLeague 方法。作为回调的一部分，将调用 SharedLeagues setLeagues 方法，该方法还会更新 MenuController 的绑定。

angular .module('app') .controller('LeagueController', ['$scope', '$state', 'SharedLeagues','League', 函数($scope, $state, SharedLeagues, 联赛) {

$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();
    });
};
}]);

联盟视图绑定到SharedLeagues，并列出新建的联盟删除如下

<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>

Menu 视图绑定到 SharedLeagues，如下所示

<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) {
...

然后您可以 get/set 来自任一控制器的数据，它会反映在另一个控制器中：

// in the controller
...
SharedData.setData('somevalue');

var someVal = SharedData.getData();
...

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

在 Angular 中共享 strongloop 集合

sharing strongloop collections in Angular

angularjs

service

controller

strongloop