具有UI Bootstrap模式窗口的父和子$范围?

时间:2016-04-26 03:00:58

标签: javascript angularjs twitter-bootstrap scope

我为Firebase电子邮件制作了一个UI Bootstrap模式窗口&密码登录。模态窗口登录用户并返回authData对象。然后模态窗口自行关闭。然后authData对象对主窗口或家庭控制器不可用。

模态窗口或其控制器似乎正在生成一个孩子$scope。 {$ 1}}对象在子$ scope上可用,但在父authData上不可用。

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

$scope

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

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

请注意,我设置了 $scope.openModal = function(size) { var modalInstance = $uibModal.open({ templateUrl: 'javascript/templates/emailLoginModalContent.html', controller: 'EmailLoginModalInstanceCtrl', scope: $scope, size: size }); }; 。我也试过scope: $scope

以下是模态窗口控制器的一部分:

scope: $parent

请注意,我尝试了 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;对象放在父$ scope上。

我也试过从Home Controller运行authData。得到$getAuth()对象并将其放在父authData上。但是当模态窗口关闭时,我无法在Home Controller中获取代码。

有什么建议吗?

1 个答案:

答案 0 :(得分:3)

您可以将模态控制器中的值传递给父控制器函数,如下所示,

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

注意,模态的好按钮必须在$scope.ok上调用模态控制器ng-click

现在,在您的父控制器中,$ 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)
})