javascript - 带有 UI Bootstrap 模式窗口的父级和子级 $scope？

Question

我正在为 Firebase 电子邮件和密码登录制作 UI Bootstrap 模式窗口。模式窗口登录用户并返回 authData 对象。然后模态窗口会自行关闭。那么 authData 对象对于主窗口或主 Controller 不可用。

模态窗口或其 Controller 似乎正在创建一个子$scope。 authData 对象在子 $scope 上可用，但在父 $scope 上不可用。

这是 home.html 中执行代码以打开模式窗口的按钮:

<button type="button" class="btn btn-info" ng-click="openModal('md')">
   E-mail &amp; password</button>

以下是 HomeController.js 中打开模式窗口的代码:

  $scope.openModal = function(size) {
    var modalInstance = $uibModal.open({
      templateUrl: 'javascript/templates/emailLoginModalContent.html',
      controller: 'EmailLoginModalInstanceCtrl',
      scope: $scope,
      size: size
    });
  };

请注意，我设置了范围:$scope。我还尝试了范围:$parent。

这是模式窗口 Controller 的一部分:

  app.controller('EmailLoginModalInstanceCtrl', ['$scope', '$uibModalInstance', '$firebaseAuth', function($scope, $uibModalInstance, $firebaseAuth) {
    console.log("EmailLoginModalInstanceCtrl controller.");

    var ref = new Firebase("https://my-firebase.firebaseio.com/");
    $scope.authObj = $firebaseAuth(ref);

    // Login user

    $scope.loginUser = function(user) {
      ref.authWithPassword({
        email: $scope.user.email,
        password: $scope.user.password
      }, function(error, authData) {
        if (error) {
          console.log("Login Failed!", error);
        } else {
          console.log("Authenticated successfully with payload:", authData);
          $scope.authData = authData;
          $scope.authData.uid = authData.uid;
          console.log($scope.authData.uid);
          $scope.reset();
          $scope.cancel();
          $scope.$apply(function() {
            console.log("Applied!");
          });
        }
      });
    };

  }]);

请注意，我尝试了 $scope.authData = authData; 和 $scope.authData.uid = authData.uid;。两者都无法将 authData 对象放在父 $scope 上。

我还尝试从 Home Controller 运行 $getAuth()。这获取了 authData 对象并将其放在父级 $scope 上。但我无法在模式窗口关闭时执行主 Controller 中的代码。

有什么建议吗？

Answer 1

您可以像这样将值从模态 Controller 传递到父 Controller 函数，

  $scope.ok = function(){
    $uibModalInstance.close({ authData : authData})
  }

注意，模态的确定按钮必须在 ng-click 上调用模态 Controller 的 $scope.ok。

现在，在您的父 Controller 中，$uibModal.open 返回一个包含 result 属性的对象。

var modalInstance = $uibModal.open({
      templateUrl: 'javascript/templates/emailLoginModalContent.html',
      controller: 'EmailLoginModalInstanceCtrl',
      scope: $scope,
      size: size
    })
modalInstance.result.then(function(authData){
  console.log('printing authData - ', authData)
})