angularjs – Angular UI Bootstrap模态更新$scope

发布时间：2020-12-17 09:04:04 所属栏目：安全来源：网络整理

导读：我想使用模态来编辑我的数据.我将数据传递给模态实例.当我点击确定,我将编辑的数据在$scope.selected传回给控制器. 在那里我想更新原来的$范围.不知何故,$范围不会更新.我究竟做错了什么？ var ModalDemoCtrl = function ($scope,$modal,$log) { $scope.data

我想使用模态来编辑我的数据.我将数据传递给模态实例.当我点击确定,我将编辑的数据在$scope.selected传回给控制器.

在那里我想更新原来的$范围.不知何故,$范围不会更新.我究竟做错了什么？

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>

你没有包括你的模态模板,所以这有点猜测.您的代码非常接近于角度模态的示例代码,该模式在模板中使用了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>

如果是这样,那么在您的情况下,您将在子范围内分配选择,这不会影响父范围的所选属性.然后,当您尝试访问$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一个工作示例.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!