Angular-Liste nicht auf Uhr aktualisieren

Question

Ich habe einige Winkel-Controller für Get/Post-Anfragen ein paar Mal und damit nicht zu eckig (oder JS in irgendeiner Weise, ich bin der Backend-Typ nicht Frontend), aber bekam ein Problem, das ich letzte Woche für ein privates Projekt zu lösen versuchte, ohne Erfolg. Ich habe jede Lösung ausprobiert, die ich hier finden konnte. Hoffentlich kann jemand helfen.

Ich bekomme 1x JSON-Objekt aus dem Backend mit 4x Strings und eine Liste von Strings.

{ 
    'var1':'abc', 
    'var2':'def', 
    'var3':'ghi', 
    'var4':'jkl', 
    'images':['images/abcd.jpg', 'images/efgh.jpg'] 
} 

Die GUI aktualisiert alle 4 Zeichenfolgen, aber nicht die Liste.

Controller:

app.controller('ObjectInfoController', function ($scope, $window, $http) { 

     $scope.$watch('images', function(newValue, oldValue) { 
      alert(newValue); 
     }); 

     $http.post("http://localhost:8080/view_object/", postdata).then(
      function(data, status, headers, config) { 
      $scope.var1 = data.data.var1; 
      $scope.var2 = data.data.var2; 
      $scope.var3 = data.data.var3; 
      $scope.var4 = data.data.var4; 
      $scope.images = data.data.images; 
      $scope.$digest(); 
     }, 
     function(err) { 
      // Do something 
     } 
    ); 
}); 

HTML:

<div class="row" ng-controller="ObjectInfoController"> 
    <div class="col-md-3"> 
     <!-- Images --> 
     <div class="owl-carousel content-slider-with-controls-autoplay"> 
      <div class="overlay-container overlay-visible" ng-repeat="image in images"> 
       <img src="{{image}}" alt=""> 
       <div class="overlay-bottom hidden-xs"> 

       </div> 
       <a href="{{image}}" class="popup-img overlay-link"><i class="icon-plus-1"></i></a> 
      </div> 
     </div> 
     <!-- Images end --> 
    </div> 
    <div class="col-md-8 pv-30 TextBlock bottomFix"> 
     <h2 class="TextBlockTitle">{{var1}}</h2> 
     <ul class="nav"> 
      <li class="icon-right-open-outline"><strong>{{var2}}</strong></li> 
      <li class="icon-right-open-outline"><strong>{{var3}}</strong></li> 
      <li class="icon-right-open-outline"><strong>{{var4}}</strong></li> 
    </ul> 
    </div> 
</div> 

ich Menschen sah Uhren mit diesem Problem zu beheben (obwohl ich nicht, warum die Liste braucht es aber keine Daten verbleiben), kann aber nicht Mach es zur Arbeit.

Siehe die Warnung() Ich mache es in der Uhr? Mit dieser Warnung bekomme ich die Bilder in meiner ng-Wiederholung und alles sieht gut aus. Entfernen der Warnung, und es funktioniert nicht. Führt eine Warnung eine Art "Aktualisierung" für die Ansicht durch, und kann ich sie ohne Warnung erzwingen?

Ich bekomme tatsächlich 2 Alarme auftauchen, zuerst ist leer und zweite druckt meine Liste, aber das ist normal ich herausgefunden habe. Ich habe versucht, auch $ scope.images in die Uhr zu setzen, ohne Glück.

Ich fühle, dass es entweder etwas Triviales gibt, das ich nicht verstanden habe, oder ich sollte keine Uhr benutzen, aber etwas anderes? Bitte erleuchte mich, wenn du weißt, was ich falsch mache. Ich fühle mich jetzt ahnungslos.

Und danke für Ihre Zeit.

Edit: habe gerade einen zufälligen Test und getippt {{images [0]}} nach {{var1}} und der korrekte Wert wurde auf der Seite geschrieben .... so scheint das Problem nur in meinem existieren ng-Wiederholung.

Answer 1

Ich sehe keinen Grund, warum Sie die $ Uhr brauchen würden. Sie sollten $ digest auch nicht aufrufen, wenn Sie einen bestimmten Grund dafür haben.

Es ist eine gute Idee, das controllerAs-syntax zu verwenden, da es den Bereich explizit macht. Ändern Sie Ihre Controller-Deklaration im HTML-Code in <div class="row" ng-controller="ObjectInfoController as vm">, und beziehen Sie sich auf Ihre Variablen über vm in der Vorlage, z. ng-repeat="image in vm.images".

app.controller('ObjectInfoController', function ($http) { 
    var vm = this; 

    $http.post("http://localhost:8080/view_object/", postdata).then(
     function(data, status, headers, config) { 
      vm.var1 = data.data.var1; 
      vm.var2 = data.data.var2; 
      vm.var3 = data.data.var3; 
      vm.var4 = data.data.var4; 
      vm.images = data.data.images; 
     }, 
     function(err) { 
      // Do something 
     } 
    ); 
}); 

JSFiddle

Auch you should use ng-src instead of src, wenn Sie Variablen im img-Element-Quelle verwenden.

Wenn es immer noch nicht funktioniert, vermute ich, dass das Problem etwas mit Eulenkarussell zu tun hat - versuchen Sie, die Bildvariablen außerhalb des Eulenkarussells zu durchlaufen.

Answer 2

Wenn es möglich, zwei Werte in dem Bilder-Array gleich sind, ändern Sie Ihren ng-repeat Ausdruck

ng-repeat="image in images track by $index" 

ng-Repeat mit Primitiven erfordert eine gewisse Sorgfalt.Ich hätte das nur in einem Kommentar vorgeschlagen, aber ich habe keinen Vertreter.

Siehe this und this

Answer 3

Sein, weil Sie primitive Datentypen verwenden und nicht-Objekt, das die Bindung Zweiweg-Daten zur Verfügung stellen.

Der primitive Datentyp bietet keine bidirektionale Datenbindung.

vm.var1, vm.var2 usw. sind primitive Datentypen.

Sie sollten das Skript und HTML wie folgt ändern.

JS:

$http.post("http://localhost:8080/view_object/", postdata).then(
      function(data, status, headers, config) { 
      $scope.objData = data.data; 
     }, 
     function(err) { 
      // Do something 
     } 

HTML:

<ul class="nav"> 
    <li class="icon-right-open-outline"><strong>{{objData.var2}}</strong></li> 
    <li class="icon-right-open-outline"><strong>{{objData.var3}}</strong></li> 
    <li class="icon-right-open-outline"><strong>{{objData.var4}}</strong></li> 
</ul> 

Answer 4

Eigentlich arbeiteten alle Antworten. Sogar mein ursprünglicher Code funktionierte (das war ein modifiziertes Kopieren/Einfügen von einer anderen Seite, auf der ich ng-repeat verwendet habe. Ich fand heraus, dass ich denselben ng-repeat-Code in einem neuen div vor demjenigen ausführte, der nicht funktionierte. {image}} und hatte keine Probleme.

Problem ich für selbstverständlich letzten Tage dauerte wurden in meinem Controller befindet, war eigentlich ein CSS-Problem ...

im sorry Zeit verschwenden, aber dankbar, ein lernen etwas mehr darüber, was der andere Code, den Sie gepostet haben, ist :)