javascript - AngularJs 将指令参数绑定(bind)到 mdDialog 的表单

Question

大家好，我有一个非常复杂的问题。

我已经创建了一个可重复使用的指令，现在我想获取用户的参数值并将其绑定(bind)到指令中的表单。

在用户端，他们可以通过以下方式调用指令:

<test-app></test-app>

然后他们可以将参数传递到指令中:

<test-app user-email="test@hotmail.com"></test-app> 

 OR 

<test-app user-email="{{ userEmail }} "></test-app>
 //They can take value from their own controller.

在我的自己指令中，main.js:

angular.module('TestModule').controller('MainCtrl',['$mdDialog',function($mdDialog) {
 this.openDialog = openDialog;

function openDialog(){
      $mdDialog.show({
      controller: 'DialogCtrl as dialog',
      templateUrl: 'dialog.html'
      });

    }
    }]);

angular.module('TestModule').directive('testApp',function(){
      return { 
      controller: 'MainCtrl as main',
      scope: { 
      userEmail :'@'

      },
      restrict : 'E' ,
      templateUrl : 'FormButton.html'
     }
    });

angular.module('TestModule').controller('DialogCtrl',['$mdDialog',function($mdDialog,$scope){

   function submit(){
      etc etc . . 
    }

}

在 FormButton.html 中:

<md-button ng-click="main.openDialog()"> </md-button>

在 dialog.html 中:

<md-dialog>
   <form>
      etc , etc

     <input type="email" name="email" placeholder="Email" data-ng-model="userEmail">
      etc , etc
   </form>
</md-dialog>

问题:我需要从用户端传入 userEmail 值 并将其绑定(bind)到表单，以便当用户打开表单时，该值就在那里。

我认为由于 templateUrl ，绑定(bind)模型的约定方式不起作用。

我尝试过的: 1) 我尝试使用 ng-model 进行绑定(bind)，但表单位于另一页中，因此无法读取该值。

2) 我想将值从指令传递给 Controller ​​，我在网上进行了研究，但没有找到解决此问题的可行方法。

任何人都可以帮助解决这个问题吗？

Answer 1

看看 $mdDialog api docs ，尤其是在 locals 选项中。

locals - {object=}: An object containing key/value pairs. The keys will be used as names of values to inject into the controller. For example,

this.userEmail = 'someone@neeae.com';
function openDialog(){
  $mdDialog.show({
    controller: 'DialogCtrl as dialog',
    templateUrl: 'dialog.html',
    locals: {
      email: this.userEmail  // `this` is the main controller (parent).
    }
  });
}

在 html 中:

<test-app user-email="{{ main.userEmail }} "></test-app>

对话框控件

angular.module('TestModule').controller('DialogCtrl', ['$mdDialog', '$scope', 'email', function($mdDialog, $scope, email) {
  // Here you can use the user's email  
  this.userEmail = email;
  function submit() {
    //etc etc ..
  }
}]);

在dialog.html:

<md-dialog>
  <form>
   <!-- etc , etc-->

    <input type="email" name="email" placeholder="Email" data-ng-model="dialog.userEmail">