在Angular中共享Strongloop集合

Question

我的應用程序中有兩個控制器。 MenuController和LeagueController。 MenuController位於index.html主頁上。 LeagueController管理聯賽特定頁面的集合。

當應用啟動時，MenuController會通過我結合的Strongapi加載所有可用的聯賽，與Strongloop一起在頁面頂部的下拉列表中為每個聯賽創建一個條目，以便用戶可以快速跳轉到該聯賽。

我通過由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();
    });
};
}]);

在這兩種情況下，我都使用通過運行lb-ng server / server.js client / js / services / lb-services.js生成的strongloop lb-services.js

問題在於，為每個控制器創建的$ scope.leagues顯然是獨立的，但是當用戶創建新的League時，我無法讓MenuControllers Leagues數組更新，因此頂部的下拉列表不會更改。

我試圖創建一個依賴lb-services.js文件的服務，但無濟於事。

我已經搜索了所有可以在控制器之間共享數據的示例，但是我無法使它們中的任何一個都能正常工作。 任何幫助將不勝感激。 我是一名Java開發人員，試圖掌握AngularJS，並為Angular封裝和封裝數據的方式而苦苦掙扎。 我可以看到正確完成操作后效果如何，我只是沒有那個“尤里卡！” 片刻呢。

謝謝馬克。

*************解決方案大家好，多虧了Pauls的幫助，我才得以提出解決方案。

我創建了一個SharedLeagues服務，並將生成的League服務注入其中。 然后將SharedLeagues服務注入兩個控制器中。 控制器保留對SharedLeagues服務對象本身的引用，而不是對基礎聯盟數組的引用。 然后，在模板中，將ng-repeat屬性綁定到SharedLeagues.getLeagues（）方法。

SharedLeagues.service.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底層Leagues數組。

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'，function（$ scope，$ state，SharedLeagues，League）{

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

League視圖綁定到SharedLeagues，並列出要刪除的新創建的Leagues，如下所示

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

菜單視圖按以下方式綁定到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>

希望這可以幫助希望完成類似任務的其他人。 非常感謝Paul的幫助！

標記。

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