Question

我对如何在两个控制器之间共享数据感到怀疑。
我目前有两个带两个控制器的“ div”。

PriceController驱动程序调用REST服务。该服务返回数据库中存在的价格矩阵，并将数据（对象）加载到表中。
在FormController中，获取表单信息并在数据库中更新。

所需功能：

当您单击“编辑”按钮时，信息将加载到表单中。
该表单允许您编辑“价格”字段。
通过按下表单的“保存”按钮，将在数据库中对其进行更新。

我举了一个我想要的例子。将数据保存到数据库中的服务已完成，因此我没有在示例中添加它。.

问题：

实现ng-model的使用是否方便？怎么样？
是否需要使用ngModelOptions？
如何将表单数据发送到数据库？
控制器之间的连接正确吗？
你能给我个主意吗？

示例应用程序

JsFiddle中的示例
app.js

angular.module("app", [])
.factory("Service", function(){
    var data={}
  return data;
})
.controller("FormController", function($scope, Service){
    $scope.service = Service;
  $scope.updateData = function(data){
    //TODO: Implement logic to update database
  }

})
.controller("DataController", function($scope, Service){
  $scope.service = Service;
  // Fake database
  $scope.dataPrices = [
    {
        code: 'AA',
        price: 111
    },
    {
        code: 'BB',
        price: 222
    },
    {
        code: 'CC',
        price: 333
    }
  ];
    $scope.editData = function(index){
        $scope.service.data = $scope.dataPrices[index];
    }
});

index.html

<div ng-app="app">
<div ng-controller="FormController" >
<form name="mainForm"  novalidate>
    <div>
        <label>Code</label>
        <div>
            <input
                type="text"
                name="code"
                ng-required="true"
                ng-disabled="true"
                value="{{service.data.code}}"
            />
        </div>
    </div>

    <div>
        <label>Price</label>
        <div>
            <input
                    type="number"
                    name="price"
                    ng-required="true"
                    value="{{service.data.price}}"
            />
        </div>
    </div>
    <div>
        <button
          type="submit" 
          ng-click="updateData(data)">
          Save
      </button>
    </div>
</form>
</div>
<div ng-controller="DataController">
    <table>
        <tr>
            <th>Code</th>
            <th>Price</th>
            <th>Action</th>
        </tr>
        <tr ng-repeat="dat in dataPrices">
            <td>{{dat.code}}</td>
            <td>{{dat.price}}</td>

            <td>
                <button ng-click="editData($index)">
                    Edit
                </button>
            </td>
        </tr>
    </table>
</div>
</div>

请问我的英语水平。
谢谢。

Answer 1

我建议您阅读这篇文章，该文章很好地解释了如何解决该问题。 https://benohead.com/angularjs-sharing-data-controllers/

另一种选择是使用本地存储，并从其他控制器进行访问。

Answer 2

对您的问题的答复：

实现ng-model的使用是否方便？怎么样？您可以像这样使用ng-model：

<input ... ng-model="service.data.code" />

是否需要使用ngModelOptions？没必要，但在某些情况下可能有用-https://docs.angularjs.org/api/ng/directive/ngModel

如何发送表格数据到数据库？您可以使用fetch将其发布到后端：

fetch(endpoint, Service.data).then(response => console.log(response))

控制器之间的连接正确吗？是的，使用服务是在控制器之间共享数据的最佳方法。

如何使用服务将信息从一个控制器共享到另一个控制器？

2 个答案: