AngularJs將指令參數綁定到mdDialog的表單

Question

大家好，我有一個非常復雜的問題。

我創建了一個可重用的指令，現在我想獲取用戶的參數值並將其綁定到指令內的表單中。

在用戶方面 ，他們可以通過以下方式調用指令：

<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值並將其綁定到表單，以便當用戶打開表單時，該值在那里。

我認為由於templateUrl，綁定模型的常規方法不起作用。

我試過的內容：1）我嘗試了ng-model進行綁定，但是表單在另一頁中，因此它無法讀取該值。

2）我想將指令中的值傳遞給控制器​​，我在線研究，但沒有找到解決該問題的可行方法。

任何人都可以提供此解決方案的幫助嗎？

Answer 1

看一下$ mdDialog api 文檔 ，尤其是locals選項。

當地人-{object =}：包含鍵/值對的對象。 這些鍵將用作要插入控制器的值的名稱。 例如，

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>

DialogCtrl

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">

Answer 2

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

您正在“ email”變量中傳遞值。 但是您沒有在指令范圍內映射此變量。

嘗試一次。

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