AngularJS將服務數組變量綁定到控制器范圍

Question

我已經能夠將來自服務的原始數據的對象正確地綁定到來自控制器的范圍變量，但是我在使用服務中的數組變量做同樣的事情時遇到了麻煩。

service.js

myServices.factory('MyService', ['$http', function($http) {
var mySets = [];

  return {
  initMySets: function(userId, success, error) {
    $http.get(apiUrl + "/controller/getmysets", {params:{id:userId}}).success(function (data) {
      mySets = [];
      angular.copy(data, mySets);
    }).error(error);
  },

  getMySets: mySets


}]);

controllers.js

myControllers.controller('MenuController', ['$scope', 'UserService', 'MyService',
  function ($scope, UserService, MyService) {

  $scope.user = UserService.user;
  $scope.mySets = MyService.getMySets;

  $scope.logout = function() {
    UserService.logout();
  }
}]);

的index.html

<nav id="app-menu"  ng-controller="MenuController" ng-class="{hide:!global.showMenu,slide:global.showMenu}">
  <div id="menu-head">
    <h4>{{user.Email}}</h4>
  </div>
  <ul>
    <div ng-switch on="user.UserId != null">
      <li ng-switch-when="true"><a href="#/main" ng-click="toggleMenu();logout();">Logout</a></li>
      <li ng-switch-when="false"><a href="#/login" ng-click="toggleMenu()">Login</a></li>
      <li ng-switch-when="true" ng-repeat="mySet in mySets">
        <a href="#/mySet /{{mySet.MySetId}}" ng-click="toggleMenu()">{{mySet.Label}}</a>
      </li>
    </div>
  </ul>
</nav>

我有一個登錄函數，在成功傳遞userId時調用initMySets，我知道服務中的mySets變量正在角度副本上正確填充，但我沒有在控制器中獲得實際更新。

$ scope.user變量正在從UserService更新，但mySet ng-repeat不顯示服務中的列表。

從http.get返回的數據是來自我的MVC Web API控制器的IEnumerable復雜對象集合。 我不確定這是否有所作為。

Answer 1

綁定不起作用，因為您的陣列（在您的控制器中）永遠不會改變。

調用initSets成功函數時，內部數組指向一個新數組，但您的范圍變量仍指向空的初始數組。

而不是創建一個新數組，清除您的初始數組並將新項目推送到初始數組：

替換為：

mySets = [];
angular.copy(data, mySets);

那個：

mySets.length = 0; // Clear initial array
mySets.push.apply(mySets, data); // Push data to initial array

看到這個小提琴（我使用$ timeout模擬異步回調）： http ： //jsfiddle.net/UJTPD

Answer 2

而不是分配新的列表（ mySets = [] ），然后調用angular.copy ，你應該只是調用angular.copy ;

像這樣;

angular.copy(data, mySets);