writing own directive with AngularJS - angularjs

Question

I have a problem with showing error message when the user enters a wrong number. I tried to write my own directive for that but i m getting an error
"Cannot read property 'value' of undefined".
I m totally a newbie, just trying to learn directives. Any idea where did i made a mistake or how should i made it ?
Template :
<div ng-controller="performanceController">
<input type="number" name="performance" class="typo-xl-l input-power"
ng-model="performance" min-performance="10" max-performance="30">
<span id = "errorText"></span>
</div>
Controller :
'use strict';
angular.module('myApp', [
'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/inputView.html'
})
}])
.controller('performanceController', function($scope) {
})
.directive("maxPerformance", [function() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
var limit = parseInt(attrs.maxPerformance);
if (this.value.length > limit) {
document.getElementById('errorText').innerText("wrong number");
}
}
}
}])
.directive("minPerformance", [function() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
var limit = parseInt(attrs.minPerformance);
if (this.value.length < limit) {
document.getElementById('errorText').innerText("wrong number");
}
}
}
}]);
UPDATE :
.directive("maxPerformance", [function() {
return {
restrict: "A",
require: 'ngModel', //this will make ng-model attribute compulsary on directive element.
link: function(scope, elem, attrs, ngModel) { //injected ngModel here 4th parameter
var limit = parseInt(attrs.maxPerformance);
angular.element(elem).on("keydown", function() {
if (ngModel.$viewValue.length > limit) {
document.getElementById('errorText').innerText("wrong number");
}
});
}
}
}])
.directive("minPerformance", [function() {
return {
restrict: "A",
require: 'ngModel',
link: function(scope, elem, attrs, ngModel) { //injected ngModel here 4th parameter
var limit = parseInt(attrs.minPerformance);
angular.element(elem).on("keydown", function() {
if (ngModel.$viewValue.length < limit) {
document.getElementById('errorText').innerText("wrong number");
}
});
}
}
}]);
Still not working..

Answer 1

While getting the value of ngModel inside your directive you could actually have require: ngModel option inside directive which will give ngModelController value inside link function. And then easily you could fetch value of it using ngModel.$viewValue
.directive("maxPerformance", [function() {
return {
restrict: "A",
require: 'ngModel', //this will make ng-model attribute compulsary on directive element.
link: function(scope, elem, attrs, ngModel) { //injected ngModel here 4th parameter
var limit = parseInt(attrs.maxPerformance);
if (ngModel.$viewValue.length > limit) {
document.getElementById('errorText').innerText = "wrong number";
}
}
}
}])
.directive("minPerformance", [function() {
return {
restrict: "A",
require: 'ngModel',
link: function(scope, elem, attrs, ngModel) { //injected ngModel here 4th parameter
var limit = parseInt(attrs.minPerformance);
if (ngModel.$viewValue.length < limit) {
document.getElementById('errorText').innerText = "wrong number";
}
}
}
}]);
Update
Rather going for creating custom directive, you could handle such a small thing by using ng-min & ng-max attributes on the input element which is of type="number".
<form name="myForm" ng-controller="performanceController">
<input type="number" name="performance" class="typo-xl-l input-power" ng-model="performance" min="10" max="30" />
<span id="errorText" ng-show="myForm.performance.$error.min || myForm.performance.$error.max">
Wrong Number
</span>
</form>
Demo Plunkr