Parent and child $scope with UI Bootstrap modal window?

Question

I'm making a UI Bootstrap modal window for Firebase e-mail & password login. The modal window logs in the user and returns the authData object. The modal window then closes itself. Then the authData object is unavailable to the home window or the home controller.

It appears that the modal window or its controller is making a child $scope. The authData object is available on the child $scope but not on the parent $scope.

Here is the button in home.html that executes the code to open the modal window:

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

Here is the code in HomeController.js that opens the modal window:

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

Note that I set scope: $scope. I also tried scope: $parent.

Here is part of the modal window's 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!");
          });
        }
      });
    };

  }]);

Note that I tried $scope.authData = authData; and $scope.authData.uid = authData.uid;. Neither works to put the authData object on the parent $scope.

I also tried running $getAuth() from the Home Controller. That got the authData object and put it on the parent $scope. But I can't get code in Home Controller to execute when the modal window closes.

Any suggestions?

Unknown Unknown · Accepted Answer · 2016-04-26T03:46:42

You can pass the values from the modal controller to parent controller function like this,

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

Note, the modal's okay button must call modal controller's $scope.ok on ng-click.

Now, in your parent controller, $uibModal.open returns an object that contains result property.

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)
})

Parent and child $scope with UI Bootstrap modal window?

1 Answers