angularjs - AngularJS 模态范围

Question

我对范围和模态感到困惑。

我想从模态的 ajax 调用中更新一个变量 $scope.message。我怎样才能做到这一点？

angular.module('myApp').controller('x_ctrl', function ($scope, $http, $uibModal, $uibModalStack) {
  $scope.message = "start";
  $scope.open = function () {
    console.log("opening dialog");
        var modalInstance = $uibModal.open({
            templateUrl: "popup.html",
            controller: "x_ctrl",
            scope: $scope,
            size: "lg"
        });  
    modalInstance.result.then(function () {
    }, function () { 
    });
  }
  $scope.close = function() {
    console.log("getting test.json");
    $http({
    url: "test.json",
    method: "GET"
    })
    .then(function successCallback(response) {
      $scope.message = response.data.message;
      console.log($scope.message);
    });
    $uibModalStack.dismissAll();
  }
});

https://plnkr.co/edit/9xPAz18rcN2jfFqkwsX3?p=preview

标签： angularjs

Answer 1

我不认为 $uibModal 当您尝试使用与显示它的控制器相同的控制器作为模态控制器时会很好地工作。我建议将两者分开，然后您可以将更新后的值从模式返回给您的调用控制器。这是一个您应该能够适应您的目的的示例（我没有包括 json 文件检索）。

angular.module('app', ['ui.bootstrap'])
  .controller('ctrl', ($scope, $uibModal) => {
    $scope.message = 'start';
    $scope.open = () => {
      $uibModal.open({
        templateUrl: 'popup.html',
        controller: 'modalCtrl',
        size: 'lg',
        resolve: {
          message: () => $scope.message
        }
      }).result.then((data) => {
        $scope.message = data;
      });
    }
  })
  .controller('modalCtrl', ($uibModalInstance, $scope, message) => {
    $scope.message = message;
    $scope.close = () => {
      $uibModalInstance.close('some response message ' + moment().format('M/D/YY HH:mm:ss'));
    }
  });

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <button ng-click="open()">Open</button>
  <div>
    Message: {{ message }}
  </div>
  <script type="text/ng-template" id="popup.html">
    <div class="modal-body">
      Message: {{ message }}
    </div>
    <div class="modal-footer">
      <button class="btn btn-default" ng-click="close()">Close and update $scope.message</button>
    </div>
  </script>
</div>