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

您应该只调用angular.copy，而不是分配一个新列表 (mySets = []) 然后调用 angular.copy；

像这样;

angular.copy(data, mySets);