Home / Questions / 194219
Accepted
Juan Pablo B
Asked: 2020-09-06 04:46:55 +0800 CST 2020-09-06 04:46:55 +0800 CST

Problem with directive in Angular 1.5

  • 772

I have the following code which has the directive<count-characteres>

 <label class="control-label"><cr/>Género <count-characters c-name="genero"></count-characters></label>
        <div class="input-group">
           <input type="text" name="genero" class="form-control" name="genero" equired="" ng-model="produccionGeneroSel.genero" ng-maxlength="{{validations.genero.maxlength}}">
          <span class="input-group-addon"><i class="fa fa-font"></i></span>
        </div>

What I am trying to do is that when I start writing to it, it inputstarts a counter of remaining characters and when I exit inputit it disappears and I am not being able to call the directiva, passing the maxlengthand it knows what inputI am writing in. I tried $watchbut I couldn't get it to work

app.directive('countCharacters', ['$injector', function ($injector) {
        return{
            retric:'E',
            replace: true,
            scope:{
                cName: '=name'
            },
            template: function(){
                return '<span>caracteres restantes</span>';  },

            link: function($scope, element, $attrs){


            }
        };

    }]);

I plan to use it for the tag namein inputcase there are several in the same form.

angularjs

2 Answers

  1. What you need can be done with ng-init , ng-blur and ng-focus as follows:

    var app = angular.module('app', []);
app.controller('ctrl', ['$scope', function($scope){
  $scope.mensaje = 'Bienvenido!';
  $scope.focus = true;
  
  $scope.updateBlur = function(){
    $scope.focus = false;
  }
  
  $scope.updateFocus = function(){
    $scope.focus = true;
  }
}])
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container" ng-app="app" ng-controller="ctrl" ng-cloak>
  <input type="text" class="form-control" ng-blur="updateBlur()" ng-focus="updateFocus()" ng-init="characteres = 20" ng-model="mensaje" maxlength="20"> 
  <p ng-show="focus">{{characteres - mensaje.length}} caracteres restantes</p>
</div>

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

    • ng-init is used to create a variable and give it some initial value.
    • ng-blur is a native AngularJS directive that handles the event of an element losing focus.
    • ng-focus is the opposite of ng-blur.

    Tell us how it goes!

    • 3
  2. Best Answer

    If you just want to add a counter to each input, then try using ng-transcludein the directive.

    In essence, what it does is paint the content inside the directive as if it belonged to the directive's template. So in the method linkyou do the logic to count the number of characters in the input and display it:

    angular.module("app",[])
.directive("countCharacter",function(){
  return {
    restrict:"E",
    transclude:true,
    template: "<div><span ng-transclude></span> <span><span class='counter-container'> <span class='counter' /> caracteres restantes</span></div>",
    link : function($scope, $element, $attrs) {
	
		var input = $element.find("input");
		var max = parseInt(input.attr("maxlength"));
  
		var counterSpanContainer = input.parent().parent().find(".counter-container").hide();
   var counterSpan = counterSpanContainer.find(".counter");
   
    counterSpan.text(max);
   
		input.focusin(function(){
			counterSpanContainer.show();
		})
		.focusout(function(){
			counterSpanContainer.hide();
		}).on('keyup',function(){
			counterSpan.text(max - this.value.length);
		});
    }
  }
})
.controller("ctrl",function($scope){
 
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">

   <count-character>
     Contador 1
     <input type="text" maxlength="10" ng-model="texto" />
   </count-character>

   <count-character>
     Contador 2
     <input type="text" maxlength="5" ng-model="texto" />
   </count-character>
 
</div>

    In this example, everything inside the directive <count-character>will be painted inside the span <span ng-transclude></span>, so to that we add another span that will be the character count. Then in the link function, we get the input and we add an event keyupto it so that for each letter that is written, we update the counter.

    • 3