AngularJS-Ansicht nach Änderung des Modells nicht aktualisiert

Question

Ich zeige einige Daten in einer Tabelle mit Angular an und lade sie asynchron von json mit $ http. Ich habe eine Datumsauswahl und wenn der Benutzer ein anderes Datum auswählt, muss die Ansicht die Daten für dieses Datum anzeigen. Das Problem besteht darin, dass die Ansicht nicht aktualisiert wird, selbst wenn die neuen Daten korrekt geladen sind. Hier ist mein Code (ich nur wichtige Linien einschließlich vereinfacht):

<tbody> 
    <tr ng-repeat="row in tableKPI"> 
     <td ng-repeat="index in tableKPIColsInt">{{ row[index]}}</td> 
     <td ng-repeat="index in tableKPIColsFloat">{{ row[index] | number:2}}</td> 
    </tr> 
</tbody> 

Wo tableKPIColsInt und Float sind nur Listen von Zeichenketten mit Spaltennamen.

loadDailyDataFromJSON = function ($plantName,$http,$scope,$timeout) { 

    var formattedDate = dateFormat($scope.selectedDate,"yyyy-mm-dd"); 

    $http.get("json/"+formattedDate+".json") 
    .then(function (response) { 
     $scope.tableKPI = response.data[$plantName]; 
    }, 
    function(error) { 
     $scope.tableKPI = {}; 
     console.log("No data for KPI for "+formattedDate); 
    }); 

    // tried also to call $apply 
    $timeout(function() { $scope.$apply();}, 500); 
}; 

Und der Controller:

app.controller("tableController", function($scope,$routeParams,$rootScope,$http,$timeout){ 
    $scope.tableKPI = {}; 
    $scope.reloadData = function(){ 
     loadDailyDataFromJSON($rootScope.currentPlant,$http,$scope, $timeout); 
    }; 

} 

Dieser Code funktioniert das erste Mal, dass ich die Seite zu laden, dann, wenn ich das Datum der neuen Daten geladen korrekt ändern, aber die Ansicht ändert sich nicht. Ich weiß, dass es viele ähnliche Fragen gibt, aber die Lösung funktioniert nicht für mich. Ich versuchte $ scope. $ Apply(), aber es gibt mir den Fehler Digest bereits in Arbeit .. Ich habe versucht, $ apply() nach einer Zeitüberschreitung aufzurufen, aber ich bekomme das gleiche Ergebnis.

[UPDATE] das Setzen der Funktion innerhalb/außerhalb des Controllers oder in einem Service ändert nichts. Die Funktion wird aufgerufen und die Daten in der Variablen werden aktualisiert.

Vielleicht gibt es ein Problem mit dem Modell? Da ich eine doppelt verschachtelte Schleife mache, nehme ich beide Informationen zur Anzeige (eine iteriert über die Zeilen und eine über die String-Indizes). Wenn ich diesen Code setzen Sie den Controller nichts Angabe funktioniert:

<tbody ng-controller="dailyCtrl as dc"> 
    <tr ng-repeat="row in dc.tableImbalance"> 
     <td ng-model="row[index]" ng-repeat="index in dc.tableImbalanceCols" ng-bind-html="row[index].toString()"></td> 
    </tr> 
</tbody> 

Answer 1

Umgestalten es wie dieses

app.controller("tableController", function($scope,$routeParams,$rootScope,$http,$timeout){ 
    $scope.tableKPI = {}; 
    $scope.reloadData = function(){ 
     loadDailyDataFromJSON($rootScope.currentPlant,); 
    }; 


    // assuming the function is in same file as controller 
    loadDailyDataFromJSON = function ($plantName) { 

     var formattedDate = dateFormat($scope.selectedDate,"yyyy-mm-dd"); 

     $http.get("json/"+formattedDate+".json") 
     .then(function (response) { 
      $scope.tableKPI = response.data[$plantName]; 
     }, 
     function(error) { 
      $scope.tableKPI = {}; 
      console.log("No data for KPI for "+formattedDate); 
     }); 

    }; 

} 

Aber wenn Sie lieber den Service-Ansatz

app.service("testService", function($http){ 

this.loadDailyDataFromJSON = function ($username) { 

    var endpoint = "rooturl"+"json/"+formattedDate+".json"; 
     return $http({ 
     method: 'get', 
     url: endpoint 
     }); 
    }; 

} 

Und Controller

app.controller("tableController", function($scope,$routeParams,$rootScope,testService{ 
     $scope.tableKPI = {}; 
     $scope.reloadData = function(){ 
      var formattedDate = dateFormat($scope.selectedDate,"yyyy-mm-dd"); 

      testService.loadDailyDataFromJSON (formattedDate) 
      .then(function (response) { 
       $scope.tableKPI = response.data[$plantName]; 
      }, 
      function(error) { 
       $scope.tableKPI = {}; 
       console.log("No data for KPI for "+formattedDate); 
      }); 
     }; 


    } 

Wenn formattedDate ist nicht null und Sie verwendet haben, die richtige rooturl dann wird dies wie

Charme arbeiten

Answer 2

Sie nicht $timeout oder $scope.$apply brauchen, wenn Sie $http Dienst verwenden. Diese Funktionalität wurde bereits im Service $http implementiert.

Stellen Sie sicher, dass Sie Ihren Controller richtig verwendet haben.

Dies ist ein Beispiel mit Ihrem Code:

http://jsfiddle.net/jgyombzg/5/

Wenn Sie auf neu laden Sie werden sehen, welche Daten aktualisiert.

[UPDATED]

Aufgrund Update Frage denke ich, der Grund ist, ng-bind-html einen Blick in Geige wieder nehmen - können Sie 2 ng-repeat

• in 1 Fall siehe i verwendet nur ng-bind
• in 2 Fall ich benutzte ng-bind-html

Sekunde ist leer a s können Sie überprüfen.

Können Sie versuchen, das gleiche zu tun? Wenn Sie gleiche Ergebnis haben wird - $sce könnte

Answer 3

Put loadDailyDataFromJSON in angularservice helfen und diese in Ihren Controller injizieren und starten Sie es. Dann ist apply nicht erforderlich, da ich das gleiche Konzept in meiner Anwendung verwende. es funktioniert perfekt ohne anzuwenden