Accessing ng-model in html from the controller in the component

Question

This is my template html

<form name="myForm">
    <label for="name"><span>Name*: </span>
        <br>
        <input 
               name="myName" 
               type="name" 
               id="name" 
               minlength="3" 
               maxlength="16" 
               autofocus="on" 
               required 
               placeholder="   Ajay" 
               ng-model="$ctrl.myName" 
               autocomplete="name">
    </label>
</form>

Component Code:

angular.module('loginPage')
 .component('loginPage',{
    templateUrl: 'login/login.template.html',
    controller: ["$scope",function control($scope,params){

    }]
});

I want to access the ng-model in the template inside the controller (function control()). How can I do that?

You can access the model from a directive or component using the `require` part of the directive object and using functions of the required controller in the `link` function. See this answer to [What's the meaning of require: 'ngModel'?](http://stackoverflow.com/a/20930713/691711). You won't really do this in the `controller` part of the component. — zero298, Oct 27 '16 at 18:37

satya-j · Accepted Answer · 2016-10-27T18:59:47.787

0

HTML:

<form name="myForm">
    <label for="name"><span>Name*: </span>
        <br>
        <input name="myName" type="name" id="name" minlength="3" maxlength="16" autofocus="on" required placeholder="Type any name" ng-model="name" autocomplete="name">
    </label>
</form>

JS:

angular.module('loginPage')
    .component('loginPage', {
        templateUrl: 'login/login.template.html',
        controller: ["$scope", function control($scope) {
            console.log($scope.name);
        }]
    });

edited Oct 27 '16 at 18:59

answered Oct 27 '16 at 18:50

satya-j

349
1
4
11

I do not want to edit the input. Rather I want to obtain the value from the input in real time. How do I do that? – Ajayv Oct 27 '16 at 18:55
edited. The ng-model **name** for your input will bind data to $scope of the attached controller. You can obtains data through scope – satya-j Oct 27 '16 at 19:01
quick pointer to Data binding in AngularJS http://www.w3schools.com/angular/angular_databinding.asp – satya-j Oct 27 '16 at 19:03

Sathiya Veluswamy · Answer 2 · 2016-10-27T19:34:52.540

0

It can be achieved by using bindings: { name: '<' }

in component definition object. Such that name will be available in the controller.

In the template ng-model="$ctrl.name" instead of ng-model='name'

edited Oct 27 '16 at 19:34

answered Oct 27 '16 at 19:23

Sathiya Veluswamy

34
4

Accessing ng-model in html from the controller in the component

2 Answers2