Problemi di ambito ng-init multipli

Question

Sto provando a utilizzare ng-include con ng-init per riutilizzare lo stesso componente cambiando solo i suoi dati.

Il codice componente ("slider.html", che non ha controllore) si presenta così:

<div ng-repeat="person in persons"> 
    {{person.name}} 
</div> 

Dalla vista principale, voglio riutilizzare lo stesso componente che cambia "persone" lista in modo del vista ho:

<!--slider #1 --> 
<div ng-init="persons=english" ng-include ="'inc/app/views/widgets/slider.html'"></div> 

<!-- slider #2 --> 
<div ng-init="persons=german" ng-include ="'inc/app/views/widgets/slider.html'"></div> 

e nel controller i inizializzare il 2 liste "inglese" e "tedesco" come questo:

$scope.english = records.filter(function(t){return t.nationality=="english";}); 
$scope.german = records.filter(function(t){return t.nationality=="german";}); 

Quello che succede è che le 2 componenti mostrano la stessa lista di dati (tedesco); c'è un modo per legare i 2 set diversi ai componenti?

Answer 1

Che (avendo entrambe le liste impostate come tedesche) accade perché, alla fine, si sta utilizzando solo un controller, che ha solo un ambito in cui esiste il varaiable persons. Quando AngularJS avvia il processo di avvio automatico, elabora il primo ng-init, aggiornando la variabile persone del controllore corrente su inglese. Quindi elabora il secondo ng-init, aggiornando di nuovo la stessa variabile persons ora a tedesco. Quindi, quando viene eseguita la ng-repeat, prenderà i dati variabili attuali e univoci persons, quindi, essendo tutto in tedesco.

Quello che puoi fare è avere un controller indipendente per componente (slider.html), quindi ogni controller avrà le proprie variabili di binding in modo da poter creare una variabile person per ognuno e inizializzare indipendentemente ogni variabile del controller con il tuo ng -init direttiva. Esempio:

<div ng-controller="MySubController" ng-repeat="person in persons"> 
    {{person.name}} 
</div> 

...

<!--slider #1 --> 
<div ng-init="initMySubController(english)" ng-include ="'inc/app/views/widgets/slider.html'"></div> 

<!-- slider #2 --> 
<div ng-init="initMySubController(german)" ng-include ="'inc/app/views/widgets/slider.html'"></div> 

In un file JS:

var myApp = angular.module('myApp',[]); 

myApp.controller('MySubController', ['$scope', function($scope) { 
    $scope.persons = []; 

    $scope.initMySubController = function(personsData) { 
     $scope.persons = personsData; 
    } 
}]);