在模态和控制器之间传递数据答案

【问题标题】：Passing data between modal and controller在模态和控制器之间传递数据
【发布时间】：2016-03-01 11:45:33
【问题描述】：

如何在控制器中提供数据？我创建了一个非常简单的 Plunk，它应该在模式中显示 $scope 上的数据。然后我需要更新数据，并且只在单击“确定”时更新 $scope。单击“取消”将放弃更改。

但在我开始这一步之前，我需要使范围对模态可用。大多数示例使用两个控制器。我是否需要另一个控制器，如本例所示：Passing Data to Twitter Bootstrap Modal in Angular？在我的控制器中，我有以下内容：

$scope.open = function(){
  var modalInstance = $uibModal.open({
    templateUrl: 'modal.html',
    controller: 'ModalInstanceController',
    resolve: {
      users: function() {
        return $scope.users;
      }
    }
  });
};

如何在模板中显示用户？麻烦在这里：http://plnkr.co/edit/FuXjSwtljQtFYOtFRV18?p=preview

【问题讨论】：

可以帮助你stackoverflow.com/questions/34762225/…

标签： angularjs modal-dialog angular-ui-bootstrap

【解决方案1】：

为了能够访问控制器的范围，您需要在创建它的实例时将范围对象传递给模式：

  $scope.open = function() {
    var modalinstance = $uibModal.open({
      scope: $scope,
      templateUrl: 'modal.html',
      resolve: {
        users: function() {
          return $scope.users;
        }
      }
    })
  };

这样 Angular 将创建控制器 $scope 的子范围，因此您将能够访问模态范围内的项目：

演示：http://plnkr.co/edit/0m9oktX2JHFmeiaDfOpO?p=preview

【讨论】：

对我也有帮助。

【解决方案2】：

您可以在模态中访问范围 -

 $scope.open = function(){
    var modalinstance = $uibModal.open({
      templateUrl: 'modal.html',
      scope:$scope

    })
  };

【讨论】：

感谢我刚刚添加了范围作为参数声明，它运行良好，非常感谢您的建议。

【解决方案3】：

你可以只用一个控制器来做，这只是一个“肮脏”的解决方案，因为两个 html 文件将共享同一个控制器，这可能是一个问题。

您面临的问题是，在模态中您没有定义scope，因此您正在做的foreach (ng-repeat) 没有得到任何元素

您可以通过将 modal.html 更改为

轻松修复它

<div ng-controller="modalController"><div class="modal-header">
  <h3 class="modal-title">Modal</h3>
</div>
<div class="modal-body">
  <p>Existing users:</p>
  <ul>
    <li ng-repeat="user in users">{{user}}</li>
  </ul>

</div>
<div class="modal-footer">
  <button class="btn btn-default" type="button">Close</button>
</div>
</div>

如您所见，现在此模式有一个控制器（与主窗口相同），因此将有一个 scope

或者只是将范围传递给模态定义添加

var modalinstance = $uibModal.open({
      scope: $scope,...

很脏，你正在“污染”范围，但它有效:)

【讨论】：

【解决方案4】：

这是我当前项目中的一些代码，如果你想在你的函数必须驻留在 ModalInstanceController 中的模态上使用任何 ng-click，它会按预期工作

app.controller('dashboardCtrl', function ($scope, $rootScope, $location, $http, Data, $uibModal ) {

   $scope.users = '';

  $scope.open = function(){
     var modalInstance = $uibModal.open({
        templateUrl: 'modal.html',
        controller: 'ModalInstanceController',
        resolve: {
           users: function() {
             return $scope.users;
           }
        }
     })
   }
});

app.controller('ModalInstanceController', function ($scope, $uibModal, $uibModalInstance, users, $rootScope, $http, Data) {
  $scope.ok = function () {
    $uibModalInstance.close($scope.selected.item);
  }

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

  $scope.users = users ;
  $scope.selected = {
   users: $scope.users[0]
  };
});

【讨论】：