如何向$mdDialog传递数据？登录表单值同步至对话框问题求助

嘿，我之前也折腾过AngularJS里$mdDialog传值的问题，给你几个实用的解决方向：

1. 正确使用$mdDialog的locals参数（最推荐） #

大概率是你之前对locals的用法没到位，这个是官方推荐的传值方式，步骤很清晰：

首先在主控制器里打开对话框时，把已输入的登录名通过locals传进去：

// 主控制器中的打开对话框方法
$scope.openDialog = function() {
  $mdDialog.show({
    templateUrl: 'path/to/your/dialog-template.html',
    controller: 'DialogCtrl',
    // 把主表单的登录名作为本地变量传递
    locals: {
      prefilledUsername: $scope.loginForm.username
    }
  });
};

然后在对话框的控制器里，必须注入这个变量才能拿到值：

angular.module('yourApp').controller('DialogCtrl', function($scope, prefilledUsername) {
  // 把传递过来的登录名绑定到对话框的作用域，供模板使用
  $scope.dialogUsername = prefilledUsername;
});

最后在对话框模板里直接绑定这个变量就行：

<!-- 对话框模板中的表单 -->
<input type="text" ng-model="dialogUsername" placeholder="登录名">

注意：要确保主表单的登录名是双向绑定的，比如主表单的input用ng-model="loginForm.username"

2. 用共享服务存储数据（适合复杂场景） #

如果你的项目里有多个组件需要共享登录状态，或者locals在某些复杂场景下不好用，就可以搞一个共享服务：

先定义一个服务用来存登录名：

angular.module('yourApp').service('LoginSharedService', function() {
  let storedUsername = '';
  
  return {
    getUsername: () => storedUsername,
    setUsername: (name) => storedUsername = name
  };
});

在主控制器里监听登录名的变化，实时更新到服务：

// 主控制器
$scope.$watch('loginForm.username', function(newUsername) {
  LoginSharedService.setUsername(newUsername);
});

然后在对话框控制器里直接从服务取：

angular.module('yourApp').controller('DialogCtrl', function($scope, LoginSharedService) {
  $scope.dialogUsername = LoginSharedService.getUsername();
});

3. 直接引用主作用域变量（应急用，不推荐） #

如果你的对话框是在主控制器的作用域下打开的，模板里可以直接引用主作用域的变量：

<!-- 对话框模板 -->
<input type="text" ng-model="loginForm.username" placeholder="登录名">

但这种方式耦合性太高，一旦主作用域结构变化，对话框就会失效，只适合简单的临时场景。

额外注意点 #

• 如果登录名是异步加载的，要确保打开对话框时变量已经有值，可以在打开前先判断，或者用$watch监听变量变化后再打开对话框；
• 检查对话框控制器的注入是否正确，变量名要和locals里的键完全一致，不然会拿不到值。

内容的提问来源于stack exchange，提问作者Camilo