Angular UI Bootstrap Модальное обновление $scope

Я хочу использовать modal для редактирования моих данных. Я передаю данные в модальный экземпляр. Когда я нажимаю ok, я передаю отредактированные данные в $scope.selected back to the controller.

Там я хотел бы обновить исходную $scope. Так или иначе, область $не обновляется. Что я делаю неправильно?

var ModalDemoCtrl = function ($scope, $modal, $log) {

  $scope.data = { name: '', serial: ''  }

  $scope.edit = function (theIndex) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        items: function () {
          return $scope.data[theIndex];
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;

      // this is where the data gets updated, but doesn't do it
      $scope.data.name = $scope.selected.name;
      $scope.data.serial = $scope.selected.serial;

    });
  };
};

Модальный контроллер:

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    name: $scope.items.name,
    serial: $scope.items.serial
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

Модальный:

<div class="modal-header">
    <h3>{{ name }}</h3>
</div>
<div class="modal-body">
    <input type="text" value="{{ serial }}">
    <input type="text" value="{{ name }}">
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

Ответ 1

Вы не указали свой шаблон для модального, так что это немного догадка. Ваш код довольно близок к примеру кода для angular -ui modal, который использует ng-repeat в шаблоне. Если вы делаете то же самое, тогда вы должны знать, что ng-repeat создает дочернюю область, которая наследуется от родителя.

Судя по этому фрагменту:

$scope.ok = function () {
    $modalInstance.close($scope.selected);
};

он выглядит, а не делает это в вашем шаблоне:

<li ng-repeat="item in items">
    <a ng-click="selected.item = item">{{ item }}</a>
</li>

вы можете делать что-то вроде этого:

<li ng-repeat="item in items">
    <a ng-click="selected = item">{{ item }}</a>
</li>

Если это так, то в вашем случае вы назначаете selected в области дочерних объектов, и это не повлияет на свойство родительской области selected. Затем, когда вы пытаетесь получить доступ к $scope.selected.name, он будет пустым. В общем, вы должны использовать объекты для своих моделей и устанавливать на них свойства, а не назначать новые значения напрямую.

Эта часть документации более подробно описывает проблему области.

Edit:

Вы также не связываете свои входы с какой-либо моделью, поэтому данные, которые вы вводите там, никогда не сохраняются нигде. Для этого вам нужно использовать ng-model, например:

<input type="text" ng-model="editable.serial" />
<input type="text" ng-model="editable.name" />

См. this plunkr для рабочего примера.