Actualmente tengo tres componentes del mismo tipo. Por ejemplo, tengo un componente llamado 'Lister' y tengo tres componentes Lister que llaman a diferentes apis (por ejemplo, lista de maestros, estudiantes y cursos). Sin embargo, si un componente que carga cursos quiere acceder a los datos del componente que representa a los maestros, en este caso, ¿qué debo hacer? He visto algunas formas, pero todas están relacionadas con el intercambio de información entre componentes con otros tipos (a través de $ scope y $ rootScope).

  <lister data-ng-cloak api="/teacher" type="teacher"></lister>
  <lister data-ng-cloak api="/student" type="student"></lister>
  <lister data-ng-cloak api="/course" type="course"></lister>

Esta es la forma actual de usar tres componentes. Comparten controlador y servicio comunes.

0
John Doe 26 dic. 2016 a las 06:20

3 respuestas

La mejor respuesta

Las API pueden ser diferentes en su caso, pero tienen un controlador y un servicio comunes. Entonces, declare tres matrices para almacenar maestros, estudiantes y cursos en el servicio.

app.service('myService', function{
    vm = this;
    vm.teachers = [];
    vm.students = [];
    vm.courses = [];
});

Tener una llamada API para obtener los datos.

vm.getApiData = $http.get(url).then(); // url may be to get above three from api

Tener una función en servicio para obtener las listas en el controlador

vm.getData: function(val){
   return vm[val]; // value may be teachers, students and courses
}

Llame a la función anterior desde el controlador.

$scope.teachers = myService.getData('teachers');
$scope.students= myService.getData('students');
$scope.courses= myService.getData('courses');

Ahora, los datos están listos. Simplemente acceda según sus requisitos. Solo una idea

2
Mr_Perfect 26 dic. 2016 a las 05:14

Crear un objeto padre en el controlador

var parent={};

Luego, para todos los Listers, asigne un valor de este objeto principal para que todos sus datos puedan vincularse a un objeto común. por ejemplo: parent.course=value;

Entonces todos estarán compartiendo datos de un objeto común

0
Vikash Kumar 26 dic. 2016 a las 06:09

En su controlador, cree un objeto llamado lister que tenga propiedades para cada componente diferente :

$scope.lister = {
    "teacherView": "teacher",
    "studentView": "student",
    "courseView": "course",
}

Y cuando llame al método setData, reciba los datos que se almacenarán y la clave, digamos

componentService.setData(data, lister.teacherView)

Y actualice su getData para que pueda elegir qué datos desea obtener de esta manera:

componentService.getData(lister.teacherView)

Puede crear un service como este:

angular.module('app').service('componentService', function() {
    var d = {};
    function setData(data, key){
        d[key] = data;
    }

    function getData(key){
        return d[key];
    }
})
0
Rohit Jindal 26 dic. 2016 a las 08:10