Javascript AngularJS将服务数组变量绑定到控制器作用域
我已经能够正确地将带有原始数据的对象从服务绑定到来自控制器的范围变量,但是对于来自服务的数组变量,我在做同样的事情时遇到了麻烦 service.jsJavascript AngularJS将服务数组变量绑定到控制器作用域,javascript,angularjs,asp.net-web-api,angularjs-scope,angularjs-service,Javascript,Angularjs,Asp.net Web Api,Angularjs Scope,Angularjs Service,我已经能够正确地将带有原始数据的对象从服务绑定到来自控制器的范围变量,但是对于来自服务的数组变量,我在做同样的事情时遇到了麻烦 service.js myServices.factory('MyService', ['$http', function($http) { var mySets = []; return { initMySets: function(userId, success, error) { $http.get(apiUrl + "/controller/g
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>
{{user.Email}
-
我有一个登录函数,在成功传递userId时调用initMySets,我知道服务中的mySets变量在angular copy上正确填充,但我没有在控制器中获得实际更新
$scope.user变量正在从UserService更新,但mySet ng repeat没有显示来自该服务的列表
从http.get返回的数据是来自MVC Web API控制器的复杂对象的IEnumerable集合。我不确定这是否有什么不同。绑定不起作用,因为您的数组(在控制器中)永远不会更改 调用initSets success函数时,内部数组指向一个新数组,但范围变量仍然指向空的初始数组 清除初始数组并将新项目推送到初始数组,而不是创建新数组: 替换为:
mySets = [];
angular.copy(data, mySets);
据此:
mySets.length = 0; // Clear initial array
mySets.push.apply(mySets, data); // Push data to initial array
看到这个小提琴(我用$timeout模拟了一个异步回调):而不是分配一个新列表(
mySets=[]
),然后调用angular.copy
,你应该只调用angular.copy
像这样,
angular.copy(data, mySets);
查看
$apply()
方法:@Cherniv虽然$apply
确实会强制更新,并且可能对某些服务有用,但服务本身没有作用域,在$rootScope
上调用此方法可能会很昂贵。谢谢,如果我在视图上呈现{mySets[0].Label},我现在可以在控制器作用域中看到数据,然而,通过mySets的ng repeat循环并没有更新。我需要做些别的事情来“重新启动”那个循环吗?好的,当我在ng重复上取下ng开关时,它起作用了。知道这为什么会引起问题吗?这是个救命恩人!!为了解决一个类似的问题,我苦苦挣扎了几个小时。感谢joshua.johnson.814的邀请,并感谢@Mickeel的邀请answer@mickael亲爱的吉苏兹,我不知道你在干什么,也不知道为什么。我只知道这救了我的命。哇!