How to Stop AngularJS von der Bindung in Zeilen

Question

Ich benutze Angularjs 1.5.3 Ich habe 2 Dienste ein Service ruft Gebietsnamen, der andere ruft die Details für den Bereich. Also in meinem Code rufe ich den ersten Dienst an, um den Bereich zu bekommen, dann setze ich den ng-init, um die Details aufzurufen. Dies funktioniert gut, aber eckig behält nur den ersten Wert für alle Zeilen.

Hier ist der Code;

<tbody data-ng-repeat="area in vm.Areas" ng-init='vm.getDetails(area)'> 
    <tr> 
     <td class="text-bold">{{area}}</td> 
     <td>{{vm.AreaDetails.Employees}}</td> 
     <td>{{vm.AreaDetails.Hours}}</td> 
     <td>{{vm.AreaDetails.Sales}}</td> 
    </tr> 
</tbody> 

Irgendwelche Ideen zur Behebung dieses Problems? Danke

Answer 1

Sie sollten vermeiden, dafür ng-init zu verwenden. Es ist ein Missbrauch von ng-init und verringert die Leistung drastisch. Siehe: ngInit. Versuchen Sie, Ihre Daten zu bekommen, bevor Sie beginnen Rendering zB (pseydo):

vm.areas = vm.areas.map(function(area) { 
    return area.details = service.getDetails(area); 
} 

Answer 2

Sie können einfach den Controller über die Bereiche iterieren und getDetails für jedes von ihnen aufrufen und das Detail an den jeweiligen Bereich anhängen, wenn sie ankommen.

<tbody data-ng-repeat="area in vm.Areas"> 
<tr> 
    <td class="text-bold">{{area}}</td> 
    <td>{{area.details.Employees}}</td> 
    <td>{{area.details.Hours}}</td> 
    <td>{{area.details.Sales}}</td> 
</tr> 
</tbody> 

Die Bindungen werden aktualisiert, wenn die Daten ankommen:

Die Bindungen werden zusammen sein.

Oder Sie können eine Richtlinie mit isolierten Rahmen, etwa wie folgt verwendet werden:

angular.module('yourModule').directive('areaInfo', function() { 
    return { 
    scope: { 
     area: '=areaInfo' 
    }, 
    require: "yourController", // conroller where getDetails is defined 
    templateUrl: "area-info.html", 
    link: function(scope, element, attrs, ctrl) { 
     scope.areaDetails = ctrl.getDetails(scope.area); 
    } 
    } 
}); 

<script type="text/ng-template" id="area-info.html"> 
    <tr> 
    <td class="text-bold">{{area}}</td> 
    <td>{{areaDetails.Employees}}</td> 
    <td>{{areaDetails.Hours}}</td> 
    <td>{{areaDetails.Sales}}</td> 
    </tr> 
</script> 
<tbody data-ng-repeat="area in vm.Areas" area-info="area"></tbody> 

Sie können sogar die getDetails Methode der Richtlinie selbst bewegen.

Answer 3

@TJ Antwort ist direkt an den technischen Teil aber ich denke, Sie ein Design-Problem in Ihrem Code haben.

Wenn Sie einen Bereich und deren Details laden möchten, sollten Sie alle auf einmal laden. Stattdessen werden Sie sie nacheinander laden.

Nehmen wir an, Sie haben 10 Area und Sie sind Detail-Service laden Daten von (ich nehme an) der Server: das macht 11 Anfragen: 1 für alle Bereich, 10 für Details zu jedem Bereich.

Also laden Sie einfach das ganze Ding in einem Anruf zu Ihrem Dienst (und vermutlich dem Server) und führen Sie eine einfache ng-Wiederholung durch.