AngularJS : how to get directive input field model value in controller?

Question

I created a custom directive name kid. In that I have one input field with having usermodel object. I need to get its value in my controller. Can we get user model object in my controller. Actually I used to same directive in my view. I need to get both directive input values in my controller .

Here is my Plnkr

 var app =angular.module('Testappp',[]);
    app.controller('testcontroller',function(){

    })
    app.directive('kid',function(){

        return {

            restrict:"E",
            scope:{},
            template:"<input type='text' ng-model='usermodel'/>{{usermodel}}", 
        }

    })

Actually I need to know to how to retrieve value of same directive in controller.As I used two time kid . If I need to get both values in my controller .how I will get .I used two kid directive in same controller — Shruti
– Shruti, Commented Aug 5, 2015 at 8:38
I will explain again .The purpose of Question it to use directive .mean how I will communicate with my controller .In my input field I am doing 2 way binding.But If I need to use the values what I insert in my input field in my controller how I will ger — Shruti
– Shruti, Commented Aug 5, 2015 at 8:40
Yes I know ..But I need to use directive that why i ask Question .Simple way I know .Can we get directive value in controller ..Actually this Question rise in my mind when I am studying isolated scope .If I use scope{} .it give — Shruti
– Shruti, Commented Aug 5, 2015 at 8:43
Ok ;) ! You should have said it in the question. Keep in mind that 90% of the custom directive are a miss-use. Directives should be done to add behavior to an element and the less it add HTML the best it is. — Okazari
– Okazari, Commented Aug 5, 2015 at 8:51

Arno_Geismar · Accepted Answer · 2015-08-05 08:54:38Z

3

I updated your plunkr: updatedMyPlunker

I am passing the usermodel to the kid directive via its isolated scope.

The = sign makes sure that the two models will update through two way data binding

     <body ng-app="Testappp">
        <div ng-controller="testcontroller">
          <kid usermodel="usermodel"></kid>
           <kid usermodel="usermodelSecondKid"></kid>
        </div>

    </body>    

     var app =angular.module('Testappp',[]);
            app.controller('testcontroller',function($scope){
              $scope.usermodel = '';
              $scope.usermodelSecondKid = '';
              $scope.$watch("usermodel", function(newvalue,oldvalue){
                console.log(newvalue);
              })
            })
            app.directive('kid',function(){

                return {

                    restrict:"E",
                    scope:{ usermodel: "=usermodel"
                          },
                    template:"<input type='text' ng-model='usermodel'/>{{usermodel}}",





                }

            })

edited Aug 5, 2015 at 8:54

answered Aug 5, 2015 at 8:46

Arno_Geismar

2,3301 gold badge19 silver badges30 bronze badges

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

4 Comments

Shruti Over a year ago

but I need get value of both kid directive.you are only check first one kid directive

Arno_Geismar Over a year ago

@Shruti ok just a second

dhavalcengg Over a year ago

this won't work.. you should not have two model at directive level. Directive should be independent of your controller variable name.

Arno_Geismar Over a year ago

@dhavalcengg yeah I realized that ;) mistake in being fast. I updated

Vidya Sagar · Accepted Answer · 2015-08-05 09:08:34Z

0

Forked your plnkr. Passed two way data model from controller to directive. kid1 and kid2 are controller variable. Which will value you enter in text box.

    <!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@*" data-semver="2.0.0" src="scruipt"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  </head>

  <body ng-app="Testappp">
    <div ng-controller="testcontroller">
      <kid ng-model="kid1"></kid>
       <kid ng-model="kid2"></kid>
    </div>

</body>
<script>
    var app =angular.module('Testappp',[]);
    app.controller('testcontroller',function(){

    })
    app.directive('kid',function(){

        return {

            restrict:"E",
            scope:{
              ngModel: '=ngModel'
            },
            template:"<input type='text' ng-model='ngModel'/>{{ngModel}}",

        }

    })
</script>
</html>

edited Aug 5, 2015 at 9:08

Vidya Sagar

1,7173 gold badges17 silver badges30 bronze badges

answered Aug 5, 2015 at 8:44

dhavalcengg

4,7131 gold badge20 silver badges26 bronze badges

4 Comments

Okazari Over a year ago

I'm not sure this is a good idea to name the two way data binding var the same as an angular directive.

dhavalcengg Over a year ago

it is just a variable name of scope. you can pass anything. BTW its kid1 and kid2 not kid.

dhavalcengg Over a year ago

@Shruti you can change kid1 and kid2 to any variable name. It will be bind to your controller's scope.

dhavalcengg Over a year ago

@Shruti Glad I helped :)

Collectives™ on Stack Overflow

AngularJS : how to get directive input field model value in controller?

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related