Блог

Я хотел бы иметь возможность понять, почему со мной происходит следующая ошибка.

В настоящее время у меня есть сервис, который возвращает объект.
Эта служба используется для обмена информацией между двумя контроллерами, контроллером «1» и контроллером «2».
С контроллера «2» я обновляю информацию о драйвере «1».

Ошибка:
Когда информация в контроллере «1» изменяется, я также обновляю информацию контроллера «2» (нежелательную).
В моем контроллере «2» я не использую службу для загрузки своей информации, ее не следует изменять.

ДЕМОНСТРАЦИЯ:

Пример на скрипке.

Шаги по воспроизведению ошибки:

1. Нажмите кнопку Редактирования в любой строке. (Информация загружается в форму).
2. Отредактируйте поле «Цена» (информация в таблице изменена) (Нежелательно).

Также выясните, что можно использовать для получения данных «однонаправленным» способом ng-value .

Дополнительные вопросы:

1. Как я могу отправить свои данные в службу, не затрагивая информацию в таблице (контроллер «2»)?
2. Правильно ли реализовывать ng-value вместе с ng-model ? Не могли бы вы объяснить мне, как?

Спасибо!

Скриптовый код:
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"
                ng-model="service.data.code"
            />
        </div>
    </div>

    <div>
        <label>Price</label>
        <div>
            <input
                    type="number"
                    name="price"
                    ng-required="true"
                    ng-model="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>
  

Вам придется использовать

 angular.copy($scope.dataPrices[index])
  

чтобы избежать обновления данных в таблице. Это создаст глубокую копию вашего объекта.

И для отправки данных в службу вам нужно будет создать метод getter setter в службе.

Вот рабочий пример https://jsfiddle.net/q7L4ebaz/1 /