CODEWITHSUNDEEP
javascriptangularjsangularjs-directivecontroller
John Tan
John Tan

Reputation: 65

AngularJs passing parameter values to controller

My Html:

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

My Directive: 

.directive('testApp', function () {
return {
    restrict: 'E',
    scope: {
        userEmail = '@userEmail'
    },
    templateUrl: 'Form.html'
};
})

My Form in another Page:

<label> Email </label>
<input type="text" id="email">

Issue: I need to get the parameter value , and print it out on the textbox itself.

What i have done: I research on a lot of articles which demonstrated on how to pass directive parameters to controller but they were very complicated.

What i think is the next step:

1) Pass the directive parameter to the controller and then bind the controller to the textbox and set the value of the textbox to be the parameter value.

2) Or is there another way i can do this?

I am stuck on how to proceed on.

Upvotes: 1

Views: 1356

Answers (1)

kukkuz
kukkuz

Reputation: 42352

You can use attribute string binding using @

  1. In controller you initialize your userEmail variable

  2. The directive has a user-email attribute which loads value into the directive's userEmail local scope variable.

  3. Using userEmail:'@' allows for string binding from controller to the directive.

See demo below:

angular.module("app",[]).directive('application', function() {
  return {
    restrict: 'E',
    scope: {
      userEmail : '@'
    },
    templateUrl: 'Form.html'
  };
}).controller("ctrl",function($scope){
  $scope.userEmail="[email protected]";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <application user-email="{{userEmail}}"></application>
  <script type="text/ng-template" id="Form.html">
    <label>Email</label>
    <input type="text" id="email" ng-model="userEmail">
  </script>
</div>

Upvotes: 1

Related Questions