CODEWITHSUNDEEP
javascriptangularjsangular-material
John Tan
John Tan

Reputation: 65

AngularJs Bind Directive parameter to mdDialog's Form

Hi guys I have a very complicated issue.

I have created a reusable directive and now i want to take the user's parameter value and bind it to my form inside the directive.

At the user's side, they are able to call the directive by: 

<test-app></test-app>

Then they are able to pass in parameters into the directive : 

<test-app user-email="[email protected]"></test-app> 

 OR 

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

At my Own side at the directive , 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 . . 
    }

}

At the FormButton.html: 

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

At the dialog.html:

<md-dialog>
   <form>
      etc , etc

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

Issue: I need to pass in the userEmail value from the user side and bind it to the form so that when the user opens the form , the value is there.

I think because of the templateUrl , the convention way of binding the model doesn't work.

What i have tried: 1) I tried ng-model to bind but the form is in another page so it was not able to read the value.

2) I wanted to pass the value from the directive to controller , I research online but found no viable solution to this problem.

can anyone Kindly Help with this solution?

Upvotes: 1

Views: 567

Answers (2)

slackmart
slackmart

Reputation: 4924

Take a look at the $mdDialog api docs, especially at the locals option.

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 = '[email protected]';
function openDialog(){
  $mdDialog.show({
    controller: 'DialogCtrl as dialog',
    templateUrl: 'dialog.html',
    locals: {
      email: this.userEmail  // `this` is the main controller (parent).
    }
  });
}

In the 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 ..
  }
}]);

At the dialog.html:

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

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

Upvotes: 2

Aravinder
Aravinder

Reputation: 503

<test-app email="[email protected]"></test-app>

You are passing value in "email" variable. But you are not mapping this variable in directive scope.

Try this once.

<test-app userEmail="[email protected]"></test-app>

Upvotes: 0

Related Questions