How to have control over an input field from a template of a directive in AngularJs

Question

My directive contains in its template a simple input field, and I'm lookin for a solution to have control on that input field by using ngModel, but I don't know how to do.

Template:

<input name="myInput" ng-model="myInput" type="text"/>

Directive JS:

app.directive('ghPca', ['$http', '$q', function($http, $q) {
  return {
    restrict    : 'E',
    templateUrl : '/javascripts/ang/directives/pca/gh-pca-template.html',
    scope       : {
      isEnable    : '='
    },
    link        : function($scope, $el, $attrs){
        //how can I manage/control the input of THIS directive? 
    }
  }
}]);

Directive use:

<gh-pca></gh-pca>

I don't know what to set up (write) in the controller/link to bind the input. Any suggestion?

SOLUTION

The solution I was looking for it's like that one here below

app.directive('ghPca', ['$http', '$q', function($http, $q) {
      return {
        restrict    : 'E',
        templateUrl : '/javascripts/ang/directives/pca/gh-pca-template.html',
        scope       : {
          isEnable    : '='
        },
        link        : function($scope, $el, $attrs){
            //how can I manage/control the input of THIS directive? 
        },
        controller  : function($scope) {
             //here I can have control on my **$scope.myInput**
        }
      }
    }]);

it's unclear what this question or the "solution" it shows provide that isn't already clearly documented in the framework. — Claies, May 11 '17 at 09:58

score 0 · Answer 1 · answered May 10 '17 at 16:19

The very basic way in which you can understand that how to have control over an input field is :-

<html ng-app="myApp">
<head>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>

</head>


<body>
<div ng-controller="MainCtrl">
<input name="myInput" ng-model="myInput" type="text"/><button type="submit" ng-click='sub()'>Submit</button>
{{data}}
</div>

<script>

    angular.module('myApp',[])

        .controller('MainCtrl',['$scope',function($scope){
           $scope.sub = function(){
                $scope.data = 'Hi'+ ' ' +$scope.myInput;
           }

        }]);

</script>
</body>
</html>

So in your controller you need to define some function that will be performed,what I have done in this example by defining the scope of ng-model I have assigned it to another scope called data and printed it with a Hi quote,this is the very basic way,this will give you an idea how to play around with it.

Hope I made you understand this. Thanks!

How to have control over an input field from a template of a directive in AngularJs

1 Answers1