AngularJs passing parameter values to controller

Question

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.

First try to follow directive naming convension(camelCase), for example: directive name makeBold then use it in template like: <make-bold ...> </make-bold> — Avnesh Shakya
– Avnesh Shakya, Commented Jan 9, 2017 at 16:03
@AvneshShakya edited. But that isn't going to help start. Any tips to continue? — John Tan
– John Tan, Commented Jan 9, 2017 at 16:04
You want email value in directive, correct? so try this: scope: { userEmail: '@email'}, and in your template: <input type="text" ng-model="userEmail" id="email"> check about isolated scope in detail here — Avnesh Shakya
– Avnesh Shakya, Commented Jan 9, 2017 at 16:11
i want the email value into the directive then to the controller. As i need to print out the value into the input text box @AvneshShakya — John Tan
– John Tan, Commented Jan 9, 2017 at 16:13

kukkuz · Accepted Answer · 2017-01-09 16:18:11Z

1

You can use attribute string binding using @

In controller you initialize your userEmail variable
The directive has a user-email attribute which loads value into the directive's userEmail local scope variable.
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>

edited Jan 9, 2017 at 16:18

answered Jan 9, 2017 at 16:13

kukkuz

42.5k6 gold badges65 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

John Tan Over a year ago

your answer is sort of close. But i want the value in the directive which the user might enter straight in for example : <test-app email="[email protected]"></test-app> . I wan the '[email protected]' to be inserted into the form's textbox

kukkuz Over a year ago

@JohnTan well, I'm not sure what you are looking for, you can use <application user-email="[email protected]"></application> ?

kukkuz Over a year ago

@JohnTan just following up on this - so you managed to solve the issue? If this answer helped, upvote/accept too, thanks!

John Tan Over a year ago

Hi ! sorry. i did not managed to solve this. Is it possible to do it with another way ?? i think its because of my application structure as i have a few templateUrl and it cant pass directly to the controller

Collectives™ on Stack Overflow

AngularJs passing parameter values to controller

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related