javascript – AngularJS将服务数组变量绑定到控制器范围

我已经能够将来自服务的原始数据的对象与控制器的作用域变量进行正确的绑定,但我无法从服务中的数组变量中做同样的事情.

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集合.我不知道这是否有所作为.

解决方法

绑定不起作用,因为您的数组(在您的控制器中)从不改变.

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