Pourquoi cette portée angulaire ne s'affiche pas seulement si elle est après une requête HTTP?

Question

J'ai remarqué un comportement étrange dans mon code, je fis un bouton où l'action est de définir une portée et montrer un modal bootstrap avec la valeur de ce champ
Normalement, le code devrait ressembler à ceci

Mais ce ne reçois que je travaille non seulement une valeur vide dans le modèle

var table = $('#data').DataTable(); 
$('#data tbody').on('click', 'td.details-control,.addsta,.mjump,.mcon,.delwf', function() {  
    if (this.className == "btn btn-danger delwf") { 
    var tr = $(this).closest('tr'); 
    var row = table.row(tr); 
      $scope.sworcode = row.data().worcode; 
      $scope.slancode = row.data().lancode; 
      console.log(row.data().worcode); 
      $('#modal-del').modal('show'); 
      }; 
} 

Mais si j'ajoute une requête HTTP comme celui-ci la valeur apparaît dans le modal

var table = $('#data').DataTable(); 
$('#data tbody').on('click', 'td.details-control,.addsta,.mjump,.mcon,.delwf', function() { 
     if (this.className == "btn btn-danger delwf") { 

      var tr = $(this).closest('tr'); 
      var row = table.row(tr); 

      $http({ 
       method: 'GET', 
       url: localhost + "/test" 
      }).then(function successCallback(response) {}, function errorCallback(response) {}); 
      $scope.sworcode = row.data().worcode; 
      $scope.slancode = row.data().lancode; 
      console.log(row.data().worcode); 
      $('#modal-del').modal('show'); 

     }; 
} 

peut- on explique cela s'il vous plaît?

Answer 1

La raison pour laquelle votre code fonctionne lorsque vous ajoutez une requête http dans votre code est qu'il trigera un cycle $ digest qui mettra à jour la valeur de vos variables d'étendue. Sans http aussi, vous pouvez déclencher la boucle digérer en utilisant $scope.$apply()

var table = $('#data').DataTable(); 
$('#data tbody').on('click', 'td.details-control,.addsta,.mjump,.mcon,.delwf', function() {  
    if (this.className == "btn btn-danger delwf") { 
    var tr = $(this).closest('tr'); 
    var row = table.row(tr); 
      $scope.sworcode = row.data().worcode; 
      $scope.slancode = row.data().lancode; 
      console.log(row.data().worcode); 
      $scope.$apply(); 
      $('#modal-del').modal('show'); 
      }; 
} 

Pour plus d'informations How do I use $scope.$watch and $scope.$apply in AngularJS?