Question

可能有人可以帮助我。我很失落。

我在Angular应用程序中使用ng-repeat来显示发送给用户的最新消息，这些消息存储在名为＆＃34; comunicacion＆＃34;的命名控制器内的数组（lastQueries）中：

ng-repeat in comunicacion.html

<div class="list-group">
    <a class="list-group-item" ng-repeat="query in comunicacion.lastQueries | orderBy : 'last' : true  track by query._id ">
     {{query.subject}}
    </a>
</div>

当控制器检测到最后的消息（查询）已更改时，它会使用此功能从数据库中再次检索它们：

comunicacion.js（控制器）

 var self = this;
 self.getLastQueries = function(){
     $http.get( API + '/com/lastQueries/' + email ).then(
            function(res) {
                      self.lastQueries = res.data ? res.data.lastQueries : [];
     });
 };

一切都很有效，就像它应该做的那样。但...

问题

我使用 ui-router 来整理我的路线（状态）。例如，我定义了这种状态＆＃34; comunicacion＆＃34;像这样：

.state('comunicacion', {
                url:"/comunicacion",
                templateUrl: "views/comunicacion/comunicacion.html",
                controller: 'ComunicacionCtrl',
                controllerAs: 'comunicacion'
            })

当我导航到另一个状态，然后返回＆＃34; comunicacion＆＃34;时，新的更改阵列＆＃34; lastQueries＆＃34; ng-repeat中不再显示。

但是，这些更改都在$ scope中。当我更改数组时，$ scope. $$阶段是$ digest。

我尝试过的事情

$scope.$apply从数据库中获取数组时的更改
$scope.$apply
$scope.$evalAsync代替$apply
不要为新的数组更改数组，而是推送新元素

我不知道自己做错了什么，尤其是因为当我不改变状态时一切顺利。我真的不知道ui-router是否与此有关。

对不起，对于这个长期问题，我尽力做到最具体。请原谅我的英语不好，这不是我的第一语言。

代码被简化为仅显示与问题相关的部分。

感谢。

Answer 1

当您返回comunicacion视图时，您需要指定要重新加载控制器的ui-router。

<a ui-sref="comunicacion" ui-sref-opts="{reload: true}">Comunicacion</a>

或在控制器或指令中

$state.go('comunicacion', {}, {reload: true});

其他可能性是直接从您的方法返回lastQueries：

//cominicacion.html
<div class="list-group">
    <a class="list-group-item" ng-repeat="query in comunicacion.lastQueries() | orderBy : 'last' : true  track by query._id ">
     {{query.subject}}
    </a>
</div>

//comunication.controller.js
var self = this;
 self.getLastQueries = function(){
     return $http.get( API + '/com/lastQueries/' + email ).then(
            function(res) {
                      return res.data.lastQueries; // This should be enough as this is the success callback ;-)
     });
 };

也许问题是缓存？不仅是浏览器和角度，还有服务器。尝试为您的请求添加一个唯一的哈希，这样您就可以100％确定获取新数据......

return $http.get( API + '/com/lastQueries/' + email , {
  cache: false,
  params: {
    avoidCache: Date.now().toString(16)
  }
})

这可能属于$http interceptor

Answer 2

我认为您加载示波器的方式是更改self而不更新示波器本身。尝试将self.lastQueries更改为$ scope的直接更改，看看是否能解决它。我想会的。

Answer 3

可能是缓存问题。尝试禁用缓存：

$http.get( API + '/com/lastQueries/' + email, {cache: false}).then(
        function(res) {
                  self.lastQueries = res.data ? res.data.lastQueries : [];
 });

如果它工作，那么创建一个更好的机制来控制缓存（禁用缓存不是一个好主意）。见

https://docs.angularjs.org/api/ng/service/$cacheFactory

和

https://docs.angularjs.org/api/ng/type/$cacheFactory.Cache

Answer 4

我终于解决了这个问题。我将在此处发布我找到的解决方案，以防这可以帮助其他人：

在这里和那里进行测试我得出的结论是我的$ scope存在问题。 ng-repeats creates his own scope，控制器范围的子项。

所以我做了以下事情：

而不是像这样声明控制器中的功能：

 var self = this;

 self.getLastQueries = function(){
 $http.get( API + '/com/lastQueries/' + email ).then(
        function(res) {
                  self.lastQueries = res.data ? res.data.lastQueries : [];
 });
};

我使用 $ rootScope ：

 $rootScope.lastQueries = = function(){
 $http.get( API + '/com/lastQueries/' + email ).then(
        function(res) {
                  $rootScope.lastQueries = res.data ? res.data.lastQueries : [];
 });
};

每次实例化控制器时初始化lastQueries ：

$rootScope.lastQueries = [];

所以在 html 中，ng-repeat看起来像这样：

<div class="list-group">
  <a class="list-group-item" ng-repeat="query in lastQueries | orderBy : 'last' : true  track by query._id ">
   {{query.subject}}
  </a>
</div>

可能使用$ rootScope并不是最优雅的方式，但它解决了我的问题！我希望这可以帮助别人。

谢谢大家的帮助！

AngularJS ng-repeat不会更新状态变化

4 个答案: