如何在不同范围内更新模型数组中的项目，并让变化无处不在？

Question

我有一个 parent $scope 和 child $scope。加载 child 视图后，我调用 GET 来检索 JSON 数据（数百个 object 的数组），然后将其传递给 parent $scope.

现在，在 child 视图中，我从 parent 的 model 中检索数据，以获取使用 ng-repeat 构建小部件所需的数据。在每个小部件中都有数据（一个 select 下拉菜单）和一个编辑按钮，它打开一个位于 parent 视图中的模式。

我的问题：
我需要将准确的 selected object 数据 model 拉入模态，并且在模态中编辑数据应该反映所有地方的变化。在模态里面以及在 child.

中的 ng-repeat

在Parent中初始化object以包含Objects的数组：

// Model to contain the items:
var itemsModel = {};

视图加载时 Child 内控制器的调用：

// Inside Child view:
// The GET to retrieve items
ItemFactory.getAllItems(byProduct).then(function(data) {

    // I set the Model in the parent to the data
    $scope.main.itemsModel = data.data.items;

    // In child scope I now setup the ng-repeat
    vm.items = $scope.main.itemsModel;
    vm.totalItems = $scope.main.itemsModel.length;

});

从 GET

返回的 Array 中的 object 部分示例

{
    tag: "kitchen",
    term: "Red",
    item_id: "99312"
}

HTML 的 ng-repeat

<div ng-repeat="item in child.items" class="col-md-6">

<section class="bg-placeholder" value="{{item.item}}">

    <!-- Here is the function to open up the modal in the parent scope -->
    <a href="" ng-click="child.openTagModal(item.item_id, item.item)">
        <div ng-model="child.itemName" class="tag">
            {{item.item}}
        </div>
    </a>

    <div class="item-dropdown">

        <!-- ng-change here detects a change and sends a PUT request -->
        <select ng-model="item.chosenTag"
                ng-change="child.updateTag(item)">

            <option value="companies"
                    ng-selected="{{item.tag == 'kitchen'}}"
                    changed="kitchen">kitchen</option>

            <option value="bedroom"
                    ng-selected="{{item.tag == 'bedroom'}}"
                    changed="bedroom">bedroom</option>
            ...

最后 Child 中的函数打开了 Parent 中的模态，在这里我不知道如何传递我需要的确切数据，所以任何他们的变化也反映在 ng-repeat 中。

vm.openItemModal = function(id, item) {

    console.log(id);
    console.log(item);

    $scope.main.itemId = id;
    $scope.main.product = item;

    // Shows the modal
    $scope.main.modal_item = true;
    $scope.main.modal = true;

生活在Parent

的模特中的HTML

<select ng-model="main.tag"
        ng-change="main.updateTag(id, item)"
        class="btn-default">

    <option value="kitchen"
            ng-selected="{{main.tag == 'kitchen'}}"
            changed="kitchen">kitchen</option>

    <option value="bedroom"
            ng-selected="{{main.tag == 'bedroom'}}"
            changed="bedroom">bedroom</option>

现在编辑 Parent 模型中的项目标签将更新数据库中的项目数据，但不会更改 Child 范围内的数据，ng-repeat.

vm.updateTag = function(id, tag, item) {

    // PUT to update the object data in the Database:
    ItemFactory.updateTag(
        id,
        tag,
        item).then(function(data) {
            console.log(data);
        });
    };
}

更新：
创建了一个新的工厂服务来处理更新模型，但是仍然无法更新内部的 Child 标签范围ng-repeat 来自 Parent 范围：

Answer 1

对于你的问题，我想通过创建一个可以在所有控制器中共享的工厂来解决这个问题

app.service('sharableService',[ function(){
   this.sharableData = {};
   //getter
   this.getData = function(){
      return this.sharableData;
   }
   //setter
   this.setData = function(value){
      this.sharableData = value;
   }
}]);

或

工厂

app.factory('sharableService',[ function(){
   var sharableData = {};
   //getter
   var getData = function(){
      return sharableData;
   }
   //setter
   var setData = function(value){
      sharableData = value;
   }
   //method are exposed.
   return {
      getData: getData,
      setData: setData
   }
}]);

此可共享服务可完全用于在控制器之间共享数据。

如何在不同范围内更新模型数组中的项目，并让变化无处不在？

How to update item in Model array in different scopes, and have changes reflect everywhere?

javascript

angularjs

angularjs-scope

angularjs-ng-repeat