Angularjs 在控制器之间传递数据

在我的AngularJS中，我有两个控制器。其中一个负责处理有关人员的数据。另一个控制器用于处理有关如何显示人员数据的信息：

.controller('PersonCtrl', ['$rootScope', '$scope', function ($rootscope, $scope)
  {
    $scope.Persons = ['John', 'Mike'];
  } ]);


.controller('WidgetCtrl', ['$scope',
    function($scope) {
        $scope.myWidgets = {
            '1': {
                id: '1',
                name: 'Home',
                widgets: [{
                    col: 0,
                    row: 0,
                    sizeY: 1,
                    sizeX: 1,
                    name: "John"
                }, {
                    col: 2,
                    row: 1,
                    sizeY: 1,
                    sizeX: 1,
                    name: "Mike"
                }]
            }
        };

---

请注意，我有两个名字：约翰和迈克。在WidgetCtrl中，我希望将这些名称附加到name字段（在下面的示例中，我只是键入了它，以便可以清楚地看到数据的去向）。如何做到这一点？

控制器用于在模型（在其$scope中）和模板之间进行调解。有时嵌套控制器是正确的操作方式，即WidgetCtrl假定它位于PersonCtrl中。在这种情况下，它可以通过作用域原型继承访问父控制器作用域成员

---

不过，一种更复杂的方法是使用一种服务，该服务处理从后端获取数据并将其呈现给可能需要它的各种控制器。

仅详细说明注释。。。您可以使用服务在控制器之间共享数据。退房

Ieghead.io是开始使用angualrjs的极好资源

这就是该服务的外观

app.service('productService', function() {
  var personList = [];

  var add = function(newObj) {
      personList.push(newObj);
  }

  var get = function(){
      return personList;
  }

  return {
    add: add,
    get: get
  };

});

编辑

针对您关于如何在小部件中获取名称的评论

controller('WidgetCtrl', ['$scope', 'PersonService'
    function($scope, personService ) {

      /* init the myWidgets*/

      var count = 0;
      angular.forEach(personService.personList, function(item){
           $scope.myWidgets['1'].widgets[count].name = item.name;
            count = count +1;
      });
}]);

---

有几种方法可以在控制器之间共享数据—通过使用父控制器，事件、服务和控制器继承

没有正确或错误的方法，但通常，如果您从服务器获取数据，那么服务就是前进的方向。如果您想使用observer模式，即pub/sub，那么就使用events。我们在水疗中心使用多种解决方案

然而，这看起来像是服务的工作——特别是因为你说一个人负责显示数据——又名真相——又名控制器（widget）。另一个负责处理关于某人的数据-使用返回所需数组的服务

服务示例：

.factory('persons', function() {

  var persons = ['john', 'mike'];

  function getPersons() {
    return persons;
  }

  return {
    getPersons: getPersons
  }

});

更新的某些ex HTML：

<button ng-click="updateWidget(getPeople())">Update Widget</button>

更新小部件

您的控制器：

.controller('WidgetCtrl', ['$scope', 'persons'
    function($scope, persons) {

        //Both not used only for example purposes...

        var peeps = [];             
        peeps = $scope.getPeople();


        //Now in yer HTM you can pass this function into the updateWidget fct
        // ex <button ng-click="updateWidget(getPeople())">Update Widget</button>

        $scope.getPeople = function() {
        // Now this is not async but be away in the future if you req from server you need to use promises
           return persons.getPersons();
        }




       $scope.updateWidget = function(people) {

         var item = $scope.myWidgets[1].widgets;

              angular.forEach(items, function(item, $index) {

                 item.name = people[$index];
             });
      }                   

        $scope.myWidgets = {
            '1': {
                id: '1',
                name: 'Home',
                widgets: [{
                    col: 0,
                    row: 0,
                    sizeY: 1,
                    sizeX: 1,
                    name: "X"
                }, {
                    col: 2,
                    row: 1,
                    sizeY: 1,
                    sizeX: 1,
                    name: "Y"
                }]
            }
        };

.controller（'WidgetCtrl'，['$scope'，'persons'
职能（范围、人员）{
//两者都不是仅用于示例目的。。。
var-peeps=[]；
peeps=$scope.getPeople（）；
//现在在yer HTM中，您可以将此函数传递到updateWidget fct
//ex更新小部件
$scope.getPeople=function（）{
//现在，这不是异步的，但如果您需要从服务器请求，则将来可能需要使用承诺
return persons.getPersons（）；
}
$scope.updateWidget=功能（人员）{
var item=$scope.myWidgets[1].widgets；
angular.forEach（项，函数（项，$index）{
item.name=人[$index]；
});
}                   
$scope.myWidgets={
'1': {
id:'1'，
姓名：'家'，
小部件：[{
上校：0，
行：0，
西西：1，
sizeX:1，
名称：“X”
}, {
上校：2，
行：1，
西西：1，
sizeX:1，
名称：“Y”
}]
}
};

使用services/factory进行数据共享..或者将您希望在其他控制器中使用的条目id作为routeParamUse服务传递，以获取两个控制器的名称..我知道如何创建服务，将该人员的数据放入其中，并在WidgetsCtrl中访问它，但不清楚的是，我在WidgetsCtrl中如何实际分配将ose值添加到“名称”成员。请记住，如果人员的姓名在一个位置发生更改，则必须在所有位置进行更新。如果WidgetCtrl嵌套在PersonCtrl中，则$scope.Persons在PersonCtrl中以及PersonCtrl实例中都可用。这是作用域嵌套在模板中时相互继承的方式。但它不是嵌套的，即使是嵌套的，我仍然可以使用它看不到Persons的名称是如何插入myWidgets成员的name成员的。如果它们不是嵌套的，那么它们需要通过服务进行交互。之后，JavaScript引用如何工作就成了问题。您可能希望更改模型，以便为服务中的每个人使用对象，然后您就可以拥有一个引用我不知道这是怎么应用的。你是说我应该使用一个服务，并且在该服务中我创建了我的对象来存储个人数据和小部件数据吗？如果是这样，我仍然不确定这些名称是如何插入myWidgets成员的。这是回答你关于如何控制个人的第一个问题在widgetCtrl中，我将编辑答案以解决第二部分问题OK，这是我一直在想的，但我仍然看到了一个问题。当您将个人列表中的姓名存储到myWidgets的name成员中时，这不仅仅是复制姓名吗？如果服务中的姓名发生更改怎么办？这会在myWidgets中自动更新吗？我有我的疑问。我想这就是要求..“在WidgetCtrl中，我想将这些名称附加到名称字段”，如果您想跟踪名称更改…那么您将在personList上设置$watch您需要设置此变量personList-您的服务中没有此变量的方法-仅添加和获取产品7如果我使用服务检索数据，我仍然需要将这些名称插入到一些也包含UI内容的结构中例如，名称必须出现在屏幕上的确切位置，该位置是widgets.col和widgets.row指定的位置。因此，您是说将UI内容作为Person内容的一部分包含在单个结构中，当我检索人名时，我需要以编程方式将人名填充到结构中？Person数组是如何实现的填充是静态的还是动态的？目前我只是为了测试而硬编码。不过，稍后会重试