在Angular.js中共享相同类型的组件之间的数据1

问题描述：

我目前有三个相同类型的组件。例如，我有一个名为“Lister”的组件，并且我有三个调用不同apis的Lister组件（例如列出教师，学生和课程）。但是，如果加载课程的组件想要从组件中访问呈现教师的数据，那么在这种情况下，我该怎么做？我见过很少的方法，但它们都与在其他类型的组件之间共享信息有关（通过$ scope和$ rootScope）。在Angular.js中共享相同类型的组件之间的数据1

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

这是当前使用三个组件的方式。他们共享共同的控制器和服务。

所有组件共用1个控制器？ – digit

是的，他们有共同的控制器。 –

答

API在您的情况下可能会有所不同，但它们具有共同的控制器和服务。因此，宣布三个阵列来存储教师，学生和课程。

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

有一个API调用来获取数据。

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

在服务功能得到列出控制器

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

呼叫从控制器上面的功能。

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

现在，数据已准备就绪。只需根据您的要求访问它。只是一个想法

这实际上是最好的方法。或者你可以说它的角度方式。 –

答

在控制器

var parent={};

创建一个父对象，那么对于所有的一线明星，从这个父对象赋值使你的所有数据可以绑定到一个共同的目标。例如：parent.course=value;

然后，他们全部是从一个共同的对象

答

共享数据。在您控制器为每个不同的部件创建名为lister具有性质的一种对象：

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

，当你调用setData方法，接收要存储的数据和密钥，可以说

componentService.setData(data, lister.teacherView)

和更新getData所以你可以选择你想要得到这样的数据：

componentService.getData(lister.teacherView)

您可以创建一个service这样的：

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

    function getData(key){ 
     return d[key]; 
    } 
})

在Angular.js中共享相同类型的组件之间的数据1

相关推荐