时间戳

首页 > 解决方案 > 如何使用服务将信息从一个控制器共享到另一个控制器？

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

问题描述

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

所需功能：

我做了一个我想要的例子。将数据保存在数据库中的服务已经完成，所以我没有放在示例中。

问题：

  1. 实现使用ng-model方便吗？如何？
  2. 有必要使用ngModelOptions吗？
  3. 如何将表单的数据发送到数据库？
  4. 控制器之间的连接是否正确？
  5. 你能给我一个想法吗？

示例应用程序

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];
    }
});

索引.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>

对不起我的英语。
谢谢你。

标签： javascriptangularjs

解决方案

对您的问题的答复：

实现使用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))

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

推荐阅读