javascript - not - Múltiples problemas de alcance ng-init

ng-init not working

Question

Estoy tratando de usar ng-include con ng-init para reutilizar el mismo componente cambiando solo sus datos.

El código del componente ("slider.html", que no tiene controlador) se ve así:

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

Desde la vista principal, quiero reutilizar el mismo componente cambiando la lista de "personas", así que en la vista que tengo:

<!--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>

y en el controlador inicializo las 2 listas "inglés" y "alemán" de esta manera:

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

Lo que sucede es que los 2 componentes muestran la misma lista de datos (alemán); ¿Hay alguna manera de unir los 2 conjuntos diferentes a los componentes?

Answer 1

Eso (tener ambas listas establecidas en alemán) sucede porque, al final, solo está usando un controlador, que tiene solo un alcance en el que existen las persons varaiable. Cuando AngularJS inicia su proceso de arranque, procesa el primer ng-init, actualizando la variable de personas del controlador actual al inglés . Luego procesa el segundo ng-init, actualizando de nuevo la misma variable de persons ahora al alemán . Luego, cuando se realiza la repetición ng, tomará los datos variables de las persons actuales y únicas, por lo tanto, será todo en alemán.

Lo que puede hacer es tener un controlador independiente por componente (slider.html), de modo que cada controlador tenga sus propias variables de vinculación para que pueda crear una variable de personas para cada una e inicializar las variables de cada controlador de forma independiente con su directiva ng-init. Ejemplo:

<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>

En un archivo JS:

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

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

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