AngularJS

Question

私は値を返すことができるようにしたい

、その上に1つのテキスト入力を持つHTMLページをポップアップ表示する$ mdDialogの小さなAngularjsアプリケーションを作るの使用を持っていますユーザー入力を親スコープに戻します。私はこれを行う方法がわかりません。

これは、このダイアログは閉じ、右前ではないだろうが、私はこれまで

$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

をいただければ幸いしている、私はおそらく.thenを使用してこれを行うだろうものですdialog.show約束の一部。 ngMaterialの例の1つを使用して、クローズ時に変数を変更するcodepenは次のとおりです。https://codepen.io/mckenzielong/pen/veBrgE基本的には、このような何か：

$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。これの1つの欠点は、コードが非常に混乱するようになることです。このようなもの：

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

Answer 2

私が使用する最もクリーンな解決策は、$ 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); 
    }); 

}]);