angularjs nicht aktualisieren Tabelle

Question

Ich habe einige Probleme beim Versuch, das Modell einer Tabelle neu zu rendern, wenn ich ein Element innerhalb dieser Tabelle aktualisieren y Aufruf an eine http-API, die dieses Element bearbeiten wird und dann, wenn Rückruf ausgeführt wird Wird die gleiche API aufrufen, um die aktualisierte Liste von Elementen zu erhalten, funktioniert es eigentlich gut, aber das einzige Problem, das nicht die Tabelle mit den neuen Informationen aktualisiert.

Für das, was ich weiß, nimmt HTTP-Anfrage Pflege von $ gelten, aber es ist eine Art von

hier i die Tabelle verwechseln, wo ich eine ng-Wiederholung für jedes Element in der Liste, die ich erhielt:

<table cellspacing="0" class="table table-small-font table-bordered table-striped"> 
         <thead> 
          <tr> 
           <th data-i18n="_maintainer_devices_table_devices_column_code"></th> 
           <th data-i18n="_maintainer_devices_table_devices_column_type"></th> 
           <th data-i18n="_maintainer_devices_table_devices_column_status"></th> 
           <th data-i18n="_maintainer_devices_table_devices_column_action"></th> 
          </tr> 
         </thead> 
         <tbody class="middle-align"> 
          <tr ng-repeat="(key, value) in devicesList"> 
           <td>{{value.code}}</td> 
           <td>{{value.type.name}}</td> 
           <td>{{value.status.name}}</td> 
           <td ng-controller="UIModalsCtrl"> 
            <button class="btn btn-icon btn-white btn-xs"> 
             <i class="fa fa-truck"></i> 
            </button> 
            <button class="btn btn-icon btn-white btn-xs" ng-click="openModal('maintainer_modal', 'md','',{'title': 'Edit','action': 'edit'},value);" tooltip="Tooltip on bottom" tooltip-placement="bottom"> 
             <i class=" fa fa-pencil"></i> 
            </button> 
            <button class="btn btn-red btn-icon btn-icon-standalone btn-xs" ng-click="openModal('confirm_modal', 'md','',{'title': 'Delete','action': 'delete'},value);"> 
             <i class="fa fa-trash-o"></i> 
             <span data-i18n="_button_delete"></span> 
            </button> 
           </td> 
          </tr> 
         </tbody> 
        </table> 

---

deviceService.js

traceItServices.service('$deviceMaintainer', function($http) { 
var call = function(data, action, callback) { 
    var url = 'http://171.16.0.4:1337/maintainer/devices/' + action; 
    showLoadingBar({ 
     pct: 100, 
     delay: 1, 
     before: function(pct) { 
      $http.post(url, data).success(function(data, status, headers, config) { 
       callback(data); 
      }); 
     } 
    }); 
}; 

this.get = function(data, callback) { 
    call(data, 'get', function(data) { 
     callback(data); 
    }); 
} 

this.update = function(data, callback) { 
    call(data, 'update', function(data) { 
     callback(data); 
    }); 
} 

..

.

---

deviceController.js

traceitApp.controller('devicesCtrl', ['$scope', '$rootScope', '$http', '$timeout', '$messages', '$deviceMaintainer', '$translator', 
    function($scope, $rootScope, $http, $timeout, $messages, $deviceMaintainer, $translator) { 
     ....... 
     $scope.getUserDevices = function() { 
      var data = { 
       user_id: $rootScope.userInfo.userId 
      }; 

      $deviceMaintainer.get(data, function(dataOut) { 
       var list = JSON.parse(dataOut.response).devices.device; 
       list = $translator.translateDevicesList(list); 
       $timeout(function() { 
        $scope.devicesList = list; 
       }, 1) 

      }); 
     }; 

     $scope.updateDevice = function() { 
      var data = { 
       device_code: $scope.device_code, 
       device_type_id: $scope.device_type_id, 
       device_id: $scope.device_id 
      }; 

      $deviceMaintainer.update(data, function(dataOut) { 
       try { 
        var res = JSON.parse(dataOut.response); 
        if (res.result.id > 0) { 
         $messages.success($translator.localize.getLocalizedString('_message_success')); 
        } 

        $scope.getUserDevices(); 

       } catch (e) { 
        console.log(e.message); 
       } 
      }); 
     }; 
    } 
]); 

---

Vielen Dank im Voraus.

Answer 1

Ich fand, dass, ich war mit $ scope.devicesList = Liste und aus irgendeinem Grund es nicht aktualisiert, sondern stattdessen verwendet i $ rootScope.devicesList = Liste und plötzlich, es funktionierte. . wenn ich jetzt etwas und Update ändern, es aufzufrischen ...

danke Jungs =)

---

UPDATE:

Ich fand heraus, warum es nicht funktionierte, die Sache ist, ich rief die deviceCtrl-> update von einem modalen, und das modal ist, also, das gleiche Dialogfeld hat einen anderen Bereich der deviceCtrl, also wenn ich die Liste aktualisiert Es änderte sich nicht, weil es nicht im selben Bereich war. Um es zu beheben, musste ich eine Variable im modalen Controller hinzufügen, die das übergeordnete Element enthält.

var übergeordnete = $ scope. $ Parent; ($ Scope in den modalen Controller injiziert).

Auf diese Weise Eltern wird der Originalumfang deviceCtrl sein.

so dass es behoben, war schwer zu verstehen, lesen und lesen ich kam mit diesem. allen danken.

Answer 2

Eigentlich verwenden Sie sogar $ Timeout. Entsprechend Angular $scope.$apply vs $timeout as a safe $apply löst dies ein $ apply nach dem aktuellen Digest aus.

So sieht das Rendering gut aus. Sind Sie sicher, dass Sie wirklich neue Daten haben? Ich vermute, Sie haben die Rückrufe bereits debuggt.