javascript AngularJS 将服务数组变量绑定到控制器范围
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20966878/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS Bind service array variable to controller scope
提问by joshua.johnson.814
I have been able to properly bind an object with primitive data from a service to a scope variable from a controller but I'm having trouble doing the same thing with an array variable from the service.
我已经能够将具有原始数据的对象从服务正确绑定到来自控制器的作用域变量，但是我在使用来自服务的数组变量做同样的事情时遇到了麻烦。
service.js
服务.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
控制器.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
索引.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>
I have a login function that calls initMySets on success passing in the userId and I know that the mySets variable in the service is getting populated properly on the angular copy but I'm not getting the actual update in the controller.
我有一个登录函数，它在成功传入 userId 时调用 initMySets，我知道服务中的 mySets 变量在角度副本上正确填充，但我没有在控制器中获得实际更新。
The $scope.user variable is being updated from the UserService, but the mySet ng-repeat isn't displaying the list from the service.
$scope.user 变量正在从 UserService 更新，但 mySet ng-repeat 没有显示来自服务的列表。
The data being returned from the http.get is an IEnumerable collection of complex objects from my MVC Web API controller. I'm not sure if that makes a difference.
从 http.get 返回的数据是来自我的 MVC Web API 控制器的复杂对象的 IEnumerable 集合。我不确定这是否有所作为。
回答by Mickael
Binding does not work because your array (in your controller) never change.
绑定不起作用，因为您的数组（在您的控制器中）永远不会改变。
When your initSets success function is called, your internal array points to a new array but your scope variable still points to your empty initial array.
当您的 initSets 成功函数被调用时，您的内部数组指向一个新数组，但您的范围变量仍指向您的空初始数组。
Instead of create a new array, clear your initial array and push new items to initial array:
不要创建新数组，而是清除初始数组并将新项目推送到初始数组：
Replace that:
替换为：
mySets = [];
angular.copy(data, mySets);
By that:
据此：
mySets.length = 0; // Clear initial array
mySets.push.apply(mySets, data); // Push data to initial array
See this fiddle (I simulate an asynchronous callback using $timeout) : http://jsfiddle.net/UJTPD
看到这个小提琴（我使用 $timeout 模拟异步回调）：http: //jsfiddle.net/UJTPD
回答by Blowsie
Instead of assigning a new list (mySets = []) and then calling angular.copy, you should just be calling angular.copy;
而不是分配一个新的列表 ( mySets = []) 然后调用angular.copy，你应该只是调用angular.copy;
Like this;
像这样;
angular.copy(data, mySets);
