L'interface utilisateur ne se met pas à jour quand la liste est changée sur le contrôleur angulaire

Question

J'ai une liste d'images dans mon contrôleur, quand je charge la page/contrôleur, j'appelle une méthode pour peupler cette liste, et que, le résultat d'une liste est affiché sur interface ui à travers le modèle de la directive, quand je rafraîchis la liste dans le contrôleur, par une réponse $ http resquest (la même méthode qui fonctionne sur le premier chargement) l'ui ne reflète pas les changements de liste dans le contrôleur.Je fais des recherches sur le web, et le plus instructions cherchées est référez $ scope. $ apply, o essayez pour l'utiliser sur la liste atribuition, mais obtenez une erreur, digest est déjà sur la progression.Si je clique sur le bouton de rafraîchissement du navigateur, fonctionne bien.Mais quelqu'un dit que c'est pas une bonne pratique, utilisez $ scoep. $ apply, mais je n'imagine pas ce qui ne va pas avec le code. J'essaie d'utiliser $ timeout pour, mais ne fonctionne pas.

$ scope.listaImagens = resp.data;

angular.module('appImages').controller('HomeCtrl', function($scope, $location, $state, $notification, FileUploader, UrlService, $http, blockUI, ContextoService) { 

      //List of images 
      $scope.listaImagens = []; 


      $scope.findAllImagens = function() { 

       var urlImagensPagUsuario = $scope.urlImagem + "/findAllPaginadoByUsuario/" + 
        paginacaoDTO.pagRecordIndex + "/" + paginacaoDTO.pagBatchRecords + "/" + idUsuarioLocal; 

       $http.get(urlImagensPagUsuario).then(function(resp) { 

        //HERE, receive the values, but not reflect on UI 
        $scope.listaImagens = resp.data; 


       }, function(err) { 
        console.log(err); 
       }); 

      } 

      //Busca as imagens 
      $scope.findAllImagens(); 


      //Salva o usuario de contexto selecionado 
      $scope.devePersistirUsuarioContexto = function(newUsuario) { 

       if (newUsuario && newUsuario.idUsuario) { 

        $scope.urlUsuarioSelecionado = UrlService.makeUrl('usuarioselecionado'); 
        var usuarioNew = { 
         "idUsuarioFk": newUsuario.idUsuario 
        }; 
        $http.put($scope.urlUsuarioSelecionado, usuarioNew) 
         .then(function(resp) { 
          console.log('usuario de contexto atualizado'); 
          $scope.findAllImagens(); 

         }, function(err) { 
          console.log(err); 
         }); 
       } 

      } 

     } 

i essayer cet exemple:

 $timeout(function() { 
      $scope.listaImagens = resp.data; 
     }, 0); 

     $timeout(function() { 
      $scope.listaImagens = resp.data; 
      $scope.$digest() 
     }, 0); 

     $timeout(function() { 
      $scope.$apply(function(){ 
      $scope.listaImagens = resp.data; 
      } 
     }, 0); 

     scope.$parent.$watch('selecionado', function() { 
      if (scope.changeItemDrop) { 
       scope.changeItemDrop(scope.selecionado); 
      } 
     }, true); 

     scope.$watch('selecionado', function() { 
      if (scope.changeItemDrop) { 
       scope.changeItemDrop(scope.selecionado); 
      } 
     }, true); 

déclaration diretive

<div class="floating-menu-paciente"> 
     <drop-down-combo placeholder="Escolha o paciente..." url="paciente" selecionado="pacienteContexto" fieldtext="pacienteNome" id="pacienteContexto" change-item-drop="devePersistirPacienteContexto(pacienteContexto)" /> 
    </div> 

diretive

angular.module('appTmw').directive('dropDownCombo', ['UrlService', '$http', function(UrlService, $http, $timeout) { 
       return { 
        restrict: 'E', //Diretiva restrita ao elemento 
        scope: { 
         placeholder: "@", 
         url: "@", 
         selecionado: "=", 
         fieldtext: "@", 
         changeItemDrop: "&" 
        }, 
        templateUrl: '/assets/templates/dropDownCombo.html', 
        link: function(scope, elm, attrs) { 

         //Quando clica no item para escolha 
         scope.selectItem = function(resultado) { 
          scope.selecionado = resultado; 
          scope.showDrop = false; 
         }; 

         scope.$watch('selecionado', function() { 
          if (scope.changeItemDrop) { 
           scope.changeItemDrop(scope.selecionado); 
          } 
         }); 

        } 
       }; 

modèle

de la directive

<div> 
    <div class="combo"> 
     <input type="text" value={{selecionado[fieldtext].trim()}} placeholder="{{placeholder}}" ng-click="show()" ng-focus="true"> </input> 
     <button type="button" class="btn btn-default srcCombo" ng-click="show()"> 
      <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
     </button> 
    </div> 
    <!-- "showDrop" variável booleana da diretiva --> 
    <div class="listagemCombo" ng-show="showDrop" ng-mouseleave="perdeuFoco()"> 
     <table> 
      <tr ng-repeat="resultado in resultados" ng-click="selectItem(resultado)"> 
       <td> {{resultado[fieldtext]}} </td> 
      </tr> 
     </table> 
    </div> 
</div> 

Answer 1

Essayez d'utiliser le $timeout dans le gestionnaire put, à savoir:

$http.put($scope.urlUsuarioSelecionado, usuarioNew) 
        .then(function(resp) { 
         console.log('usuario de contexto atualizado'); 
         $timeout(function() { 
          $scope.findAllImagens(); 
         }, 0); 
        }, function(err) { 
         console.log(err); 
        }); 

Ou tout simplement essayer d'utiliser le evalAsync qui semble être une solution potentielle pour votre cas:

$http.put($scope.urlUsuarioSelecionado, usuarioNew) 
        .then(function(resp) { 
         console.log('usuario de contexto atualizado'); 
         $scope.$evalAsync(function() { 
          $scope.findAllImagens(); 
         }); 
        }, function(err) { 
         console.log(err); 
        }); 

Si vous avoir une montre $ tirant l'événement et pour une raison quelconque, il ne déclenche pas la fonction que vous voulez déclencher, vous pouvez utiliser $rootScope.$broadcast pour le déclencher:

// in your $watch 
scope.$watch('myVar', function() { 
    $rootscope.$broadcast('myEvent'); 
}); 

// in your controller 
$scope.$on('myEvent', function() { 
    $scope.findAllImagens(); 
});