Как поделиться информацией с одного контроллера на другой, используя сервис?

Question

У меня есть сомнения относительно того, как делиться своими данными между двумя контроллерами.
В настоящее время у меня есть два "div" с двумя контроллерами.

• Драйвер PriceController вызывает службу REST.Сервис возвращает матрицу цен, которая существует в базе данных, и загружает данные (объекты) в таблицу.
• В FormController информация о форме получается и обновляется в базе данных.

Желаемая функциональность:

• При нажатии на кнопку «Редактировать» информация загружается в форму.
• Форма позволяет редактировать поле «Цена».
• При нажатии кнопки «Сохранить» формы она обновляется в базе данных.

Я сделал пример того, что я хочу.Служба сохранения данных в базе данных сделана, поэтому я не ставил ее в пример ..

Вопросы:

1. Удобно ли реализовать использованиенг-модели?Как?
   
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];
    }
});

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

Ответ на ваши вопросы:

Удобно ли реализовывать использование ng-модели?Как?Вы можете использовать ng-модель так:

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

Правильно ли установлено соединение между контроллерами?Да, использование службы - лучший способ обмена данными между контроллерами.

Answer 2

Я бы порекомендовал вам проверить эту статью, которая очень хорошо объясняет, как вы можете подойти к ее решению. https://benohead.com/angularjs-sharing-data-controllers/

Другой альтернативой может быть использование локального хранилища и доступ с другого контроллера.