AngularJS将数据从mdDialog传递回父控制器 [英] AngularJS passing data back from mdDialog to parent controller

问题描述

我有一个小的Angularjs应用程序，该应用程序使用$ mdDialog弹出一个带有一个文本输入的html页面

I have a little Angularjs application making use of $mdDialog to pop up a html page that has one text input on it

我希望能够将用户键入的值返回到父范围的输入中.我不确定该怎么做.

I want to be able to return the value the user types into the input back to the parent scope. I'm unsure how to do this.

这是我到目前为止所拥有的

This is what I have so far

$scope.showNewTeamDialog = function () {
   $mdDialog.show({
       controller: NewTeamDialogController,
       templateUrl: 'NewTeam.html',
       locals: { newTeamName: $scope.newTeamName },
       parent: angular.element(document.body)
   })
};

function NewTeamDialogController($scope, $mdDialog, newTeamName) {

      $scope.closeDialog = function(newTeamName) {
           // before closing I want to set $scope.newTeamName to whatever the user typed in the text on the dialog pop up
           $mdDialog.hide();
      }  
}

推荐答案

虽然在关闭对话框之前不是 ，但我可能会使用对话框的.then部分来执行此操作.显示承诺.这是一个使用ngMaterial示例之一在关闭时修改变量的codepen: https://codepen. io/mckenzielong/pen/veBrgE .基本上是这样的:

While this wouldn't be right before the dialog closed, I would probably do this using the .then part of the dialog.show promise. Here is a codepen with using one of the ngMaterial examples to modify a variable on close: https://codepen.io/mckenzielong/pen/veBrgE. Basically, something like this:

$scope.showNewTeamDialog = function () {
   $mdDialog.show({
       controller: NewTeamDialogController,
       templateUrl: 'NewTeam.html',
       locals: { newTeamName: $scope.newTeamName },
       parent: angular.element(document.body)
   })
   .then((newTeamName) => {
     $scope.newTeamName = newTeamName;
   })
};

function NewTeamDialogController($scope, $mdDialog, newTeamName) {   
  $scope.closeDialog = function(newTeamName) {
    $mdDialog.hide(newTeamName);
  }  
}

或者，您可以做一些更丑陋的事情，并像这样共享范围: https://codepen.io/mckenzielong/pen/zEOaRe .缺点之一是您的代码将很快变得混乱.像这样:

Alternatively you could do something a little more ugly, and share the scope like this: https://codepen.io/mckenzielong/pen/zEOaRe. One downside to this is your code will become confusing very quickly. Something like this:

$scope.showNewTeamDialog = function () {
   $mdDialog.show({
       controller: NewTeamDialogController,
       templateUrl: 'NewTeam.html',
       scope: $scope.newTeamName,
       parent: angular.element(document.body)
   })
   .then(() => {

   })
};

function NewTeamDialogController($scope, $mdDialog) {   
  $scope.closeDialog = function(newTeamName) {
    $scope.newTeamName = newTeamName
    $mdDialog.hide();
  }  
}

这篇关于AngularJS将数据从mdDialog传递回父控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！