AngularJS将数据从mdDialog传递回父控制器

Question

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

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

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

$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();
      }  
}

非常感谢任何帮助

Answer 1

我使用的最干净的解决方案是在触发$ destroy时发回数据。这是干净的，因为它处理对话框关闭的所有情况，即当外部点击或按下转义键或调用$ mdDialog.hide（）时。

app.controller('CallerController', ['$scope', '$mdDialog',
    function($scope, $mdDialog) {

  $scope.some_event_listener = function(e) {
    $mdDialog.show({
      parent: angular.element(document.body),
      controller: SomeDialogController,
      templateUrl: 'some_dialog.html',
      locals: {
        on_complete: function(data_from_dialog_controller) {
          console.log(data_from_dialog_controller);
        }
      }
    });
  };

}]);

app.controller('SomeDialogController', ['$scope', '$mdDialog', 'on_complete',
    function($scope, $mdDialog, on_complete) {

  $scope.$on('$destroy', function() {
    on_complete($scope.some_input_model);
  });

}]);

Answer 2

虽然在对话框关闭之前它不会，但我可能会使用dialog.show承诺的.then部分来完成此操作。这是一个使用ngMaterial示例之一来修改close：https://codepen.io/mckenzielong/pen/veBrgE上的变量的codepen。基本上，这样的事情：

$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。这样做的一个缺点是你的代码会很快变得混乱。像这样：

$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();
  }  
}