AngularJS使用控制器中的函數來返回要在ng-repeat中使用的服務的數據

Question

我試圖在控制器中使用函數來返回數據，以便我可以在整個應用程序中重新使用函數來調用數據以及偶爾刷新它。

我的代碼看起來是正確的，但在實踐中，每個負載上的瀏覽器都會崩潰。

我能夠通過使用E指令，然後將該元素放置在部分中，但不能完成我所需要的工作。

最後，我願做這樣的事情：

<div ng-repeat="user in getListUsers()">{{ user.somedata }}</div> 

我曾嘗試過各種東西，得到它的測試工作，包括把$ HTTP控制器，都具有相同的結果。

如果我在控制器方法分配一個變量，而不是返回的數據，即工作的，但後來我需要調用在控制器的方法，我不希望它在默認情況下運行。只需在需要時在模板中進行呼叫即可。

任何幫助確定爲什麼這不起作用會很好。謝謝。

這裏是我有沒有發揮作用？

elite.controller('UserController', function($scope, User){ 

    $scope.getListUsers = function(){ 
     User.listUsers().then(function(response){ 
      return response.users; 
     }); 
    } 

}); 

elite.factory('User', function($http){ 
    var User = { 
     getUser: function(id){ 
      return $http.get('/user/' + id + '/settings').then(function(response){ 
       return response.data; 
      }); 
     }, 
     listUsers: function(){ 
     return $http.get('/user/').then(function(response){ 
      return response.data; 
     }); 
     } 
    } 
    return User; 
}); 

編輯：

使用下面的一些想法，我能得到我想要的功能，只是在一種不同的方式。基本上，我希望數據按需加載，而不是先行，因爲我試圖將該控制器中的所有用戶邏輯分組，並且我不希望爲每個用戶加載完整的數據。我暫時使用$ rootScope，直到我找出一些範圍繼承問題，因爲使用$ scope.users在模板中以null值結束。我可以看到AJAX調用回來了，但不知道它發生了什麼，但這是另一個問題。

elite.controller('UserController', function($scope, $rootScope, User){ 

    $scope.getListUsers = function(){ 

     User.listUsers().then(function(response){ 
      $rootScope.users = response.users; 
     }); 
    }; 

}); 

而且在導航元素我有這樣的：

<div ng-controller="UserController"> 
<a ng-href="/#user/list" ng-click="getListUsers()">user list</a> 
</div> 

Answer 1

這大約是$消化，$手錶和NG-重複。您只需簡單地使用Google搜索或查看Jsplaine給出的鏈接即可找到很多答案。

簡而言之，您的getListUsers（）函數每次調用時都會返回用戶列表。但是，每個返回的列表都是一個新的集合（數組）。對於角度來說，這意味着它必須更新頁面上列表的顯示。在每次更新之後，Angular會實際檢查幾次，以通過再次調用getListUsers（）函數來查看列表是否變得穩定。每次角度發現列表不同，所以它不斷更新列表並不斷調用getListUser函數。

爲了解決這個問題，你可以創建一個變量保存用戶列表：

$scope.userList = []; 

，也是功能更新列表

$scope.reloadListUsers = function(){ 
    User.listUsers().then(function(response){ 
     $scope.userList = response.users; 
    }); 
} 

然後在NG-重複指令

<div ng-repeat="user in userList">{{ user.somedata }}</div> 

如果您想重新加載列表，只需調用reloadListUsers函數即可。

<button ng-click="reloadListUsers()" > reload </button> 

背後的原因是，現在變量用戶列表中的結合，而不是函數調用表達式中使用，並且一旦該列表被載入它變得穩定。

Answer 2

有幾個問題。你從一個匿名函數返回一個值，當從$ http.get調用返回的promise被解析時，這個匿名函數會被調用。該函數的返回值不會是從getListUsers返回的值。

此外，您在控制器回調中引用response.users。這仍然是原始響應對象。你可能打算引用response.data.users？

嘗試這種情況：

elite.controller('UserController', function($scope, User){ 

$scope.users = []; 

$scope.getListUsers = function(){ 
    User.listUsers().then(function(response){ 
     $scope.users = response.data.users; 
    }); 
} 

}）;

elite.factory('User', function($http){ 
var User = { 
    getUser: function(id){ 
     return $http.get('/user/' + id + '/settings'); 
    }, 
    listUsers: function(){ 
    return $http.get('/user/'); 
    } 
} 
    return User; 
}); 

然後，結合它在視圖中：

<div ng-repeat="user in users">{{ user.somedata }}</div> 

了NG-重複指令不會吐出的任何元件，如果用戶是未定義的或空的。