How to get value of an input field inside a directive

Question

I have a directive <stu-directive> with input field and a select in it. How do I get the values typed or selected in the directive function.

The html that uses my directive:

<div class="certFull">

<stu-directive obj ="certObj" ng-model="stuDirModel"></stu-directive>

<div class="addDir col-md-12 mg">

This is the directive's html:

<div  ng-transclude class="container-fluid stuDirectiveClass mg">
<div class="rows">
    <div class="col-md-12 mg">
        <div class="form-group">
            <div class="rows">
                <div class="col-md-6"><label for="studentNameId">Student name</label></div>
                <div class="col-md-6">
                    <select class="form-control" ng-model="selectStudent">   <!--get this value--> 
                        <option>Stu1</option>
                        <option>Stu2</option>
                        <option>Stu3</option>
                        <option>Stu4</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="form-group mg">
            <div class="rows">
                <div class="col-md-6"><label for="studentNameId">Student mark</label></div>
                <div class="col-md-6">
                    <input type="text" class="form-control" ng-model="studentMark" placeholder="Student mark" />  <!--get this value--> 
                </div>
            </div>
        </div>
    </div>
</div>

The directive function:

    uiRouteApp.directive('stuDirective', function () {

    return {

        restrict: 'E',
        //scope: {
        //    externalObj: '=obj'
        //},
        transclude: true,
        templateUrl: 'htmlFiles/stuDirective.html',
        link: function link(scope, element, attrs) {
           //how do i access the input field values in directive
        },
        controller: ['$scope','$timeout', function ($scope,$timeout) {
            console.log($scope.selectStudent); // undefined

        }]

    }
})

Put values to options

Burak Akyıldız
– Burak Akyıldız

2017-07-13 09:41:36 +00:00
Commented Jul 13, 2017 at 9:41 — Burak Akyıldız
– Burak Akyıldız, Commented Jul 13, 2017 at 9:41
@BurakAkyıldız. how to access it after?

Abhi
– Abhi

2017-07-13 09:44:18 +00:00
Commented Jul 13, 2017 at 9:44 — Abhi
– Abhi, Commented Jul 13, 2017 at 9:44

Burak Akyıldız · Accepted Answer · 2017-07-13 09:51:42Z

Always use . in ng-model

Define a variable in your directive then referance controller name before it in ng-model

  uiRouteApp.directive('stuDirective', function () {

    return {

        restrict: 'E',
        //scope: {
        //    externalObj: '=obj'
        //},
        transclude: true,
        templateUrl: 'htmlFiles/stuDirective.html',
        link: function link(scope, element, attrs) {
           //how do i access the input field values in directive
        },
        controller: ['$scope','$timeout', function ($scope,$timeout) {
            var stuDirectiveCtrl = this;
            stuDirectiveCtrl.selectStudent = '';
            
            stuDirectiveCtrl.log = function(){
              console.log(this.selectStudent);
            }

        }],
        controllerAs:'stuDirectiveCtrl'

    }
})

<select class="form-control" ng-change="stuDirectiveCtrl.log()" ng-model="stuDirectiveCtrl.selectStudent">   <!--get this value--> 
    <option value="1">Stu1</option>
    <option value="2">Stu2</option>
    <option value="3">Stu3</option>
    <option value="4">Stu4</option>
</select>

With usage of controllerAs you can referance your controller in html.

sumit chauhan · Accepted Answer · 2017-07-13 11:18:27Z

Man you haven't mentioned you directive in your html, also your directive is element based. you need to use your directive as element in html.

Please go through with these link might help you. https://www.w3schools.com/angular/angular_directives.asp

https://docs.angularjs.org/guide/directive

See code snippet i am able to get the element in directive.

var app = angular.module('app', function() {});

app.directive('stuDirective', function () {

    return {

        restrict: 'E',
        transclude: true,
        //templateUrl: 'htmlFiles/stuDirective.html',
        link: function link(scope, element, attrs) {
           scope.Details = function(){
            console.log(scope.selectStudent + ' ' +scope.studentMark);     
            };
        },
        controller: ['$scope','$timeout', function ($scope,$timeout) {
           

        }]

    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="certFull" ng-app="app">

<stu-directive obj ="certObj" ng-model="stuDirModel"></stu-directive>

	<div class="container-fluid">
<div class="rows">
    <div class="col-md-12 mg">
        <div class="form-group">
            <div class="rows">
                <div class="col-md-6"><label for="studentNameId">Student name</label></div>
                <div class="col-md-6">
                    <select class="form-control" ng-model="selectStudent">   <!--get this value--> 
                        <option>Stu1</option>
                        <option>Stu2</option>
                        <option>Stu3</option>
                        <option>Stu4</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="form-group mg">
            <div class="rows">
                <div class="col-md-6"><label for="studentNameId">Student mark</label></div>
                <div class="col-md-6">
                    <input type="text" class="form-control" ng-model="studentMark" placeholder="Student mark" />  <!--get this value--> 
                </div>
                <div class="col-md-6">
                   <button ng-click="Details()">Call Dir</button>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="addDir col-md-12 mg">

the html that you see is the directive. I have not posted the html that uses the directive.
then how can we help you. if you will not post the whole code, how can we understand the code and provide you the solutions
sorry, i mentioned in the text above. thought that'd be enough. i've edited my question
um, how do i get the value of the text typed inside the input box which is inside the directive

Jenny · Accepted Answer · 2017-07-13 09:57:55Z

You need some event like this: (or if you do not want to use event then use $watch)

var app = angular.module('app', function() {});

app.directive('stuDirective', function () {
    return {

        restrict: 'E',
        transclude: true,
        //templateUrl: 'htmlFiles/stuDirective.html',
        link: function link(scope, element, attrs) {
         scope.Print = function(){
            console.log(scope.selectStudent + ' ' +scope.studentMark);     
            };
        },
        controller: ['$scope','$timeout', function ($scope,$timeout) {
           

        }]

    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div class="certFull" ng-app="app">

<stu-directive obj ="certObj" ng-model="stuDirModel"></stu-directive>

	<div class="container-fluid">
<div class="rows">
    <div class="col-md-12 mg">
        <div class="form-group">
            <div class="rows">
                <div class="col-md-6"><label for="studentNameId">Student name</label></div>
                <div class="col-md-6">
                    <select class="form-control" ng-model="selectStudent">   <!--get this value--> 
                        <option>Stu1</option>
                        <option>Stu2</option>
                        <option>Stu3</option>
                        <option>Stu4</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="form-group mg">
            <div class="rows">
                <div class="col-md-6"><label for="studentNameId">Student mark</label></div>
                <div class="col-md-6">
                    <input type="text" class="form-control" ng-model="studentMark" placeholder="Student mark" />  <!--get this value--> 
                </div>
                <div class="col-md-6">
                   <button ng-click="Print()">Call Dir</button>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="addDir col-md-12 mg">

Monica · Accepted Answer · 2017-07-13 09:53:01Z

Into HTML you have to use your directive as element and add to it an attribute that contain the value you should use into directive, for example:

<stu-directive selected="selectStudent"></stud-directive>

Directive should use scope for save the value, for example:

uiRouteApp.directive('stuDirective', function () {

return {

    restrict: 'E',
    scope: {
        selected: '='
    },
    transclude: true,
    templateUrl: 'htmlFiles/stuDirective.html',
    link: function link(scope, element, attrs) {
        console.log(scope.selected);

    }]

}

alfishan aqeel · Accepted Answer · 2017-07-13 10:23:55Z



    angular.module("myApp",[])
    .directive('stuDirective', function () {

        return {

            restrict: 'E',
            scope:{
              selectStudent:'@',
              studentMark:'@'
            },
            template: '<div class="container-fluid stuDirectiveClass mg"><div class="rows"><div class="col-md-12 mg"><div class="form-group"><div class="rows"><div class="col-md-6">label for="studentNameId">Student name</label></div>        <div class="col-md-6"><select class="form-control" ng-model="selectStudent"><option>Stu1</option>                   <option>Stu2</option><option>Stu3</option>                    <option>Stu4</option></select></div></div></div></div><div class="col-md-12"><div class="form-group mg"><div class="rows"> <div class="col-md-6"><label for="studentNameId">Student mark</label></div><div class="col-md-6"><input type="text" class="form-control" ng-model="studentMark" placeholder="Student mark" /></div></div></div></div></div>',
            link: function link(scope, element, attrs) {
            },
            controller: function ($scope,$timeout) {  $scope.$watch('[studentMark,selectStudent]',function(value,value1){
                console.log(value)
                console.log(value1)
                })

            }

        }
    })
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <html>
        <body ng-app="myApp">
             <stu-directive></stu-directive>
        </body>
    </html>

Please avoid code-only answers. Instead, explain what your code does and how/why it may solve the question.

Collectives™ on Stack Overflow

How to get value of an input field inside a directive

5 Answers 5

Comments

4 Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

Comments

Comments

1 Comment

Related