Question

我想使用模态编辑我的数据。我将数据传递给模态实例。当我单击确定时，我将$ scope.selected中的已编辑数据传递回控制器。

在那里，我想更新原始的$ scope。不知何故，$ 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>

Answer 1

您没有为模式添加模板，所以这是一个猜测。您的代码非常接近angular-ui模式的示例代码，该代码在模板中使用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时，它将为空。通常，您应该为模型使用对象，并在它们上设置属性，而不是直接分配新值。

This part of the documentation更详细地解释了范围问题。

编辑：

您根本没有将输入绑定到任何模型，因此您输入的数据永远不会存储在任何地方。您需要使用ng-model来执行此操作，例如：

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

有关工作示例，请参阅this plunkr。

Angular UI Bootstrap Modal更新$ scope

1 个答案: