Problem with directive in Angular 1.5

Question

Problem with directive in Angular 1.5

Navigation

#1 by (3 votes)
#2 by (3 votes)

1

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

 <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'm trying to do is that when you start writing in the input start a counter of remaining characters and when I leave the input disappear and I can not call the directiva , passing the maxlength and know what input I'm writing. Try with $watch but I could not walk

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'm going to use it for the name tag input if there are several in the same form.

angularjs angular

asked by Juan Pablo B 05.09.2018 в 14:46

source

2 answers

3

What you need can be done with ng-init , < strong> 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 when it loses focus

ng-focus is the opposite of ng-blur.

You tell us how you are doing!

answered by 05.09.2018 в 15:18

Problem with simple C ++ code Why do I loop this result?

score 3 · Accepted Answer

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

In essence what it does is that it paints the content within the directive as if it belonged to the directive's template. Then in the method link you do the logic to count the number of characters in the input and show 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 that is inside the <count-character> directive will be painted within the%% span%, so we add another span that will be the character counter. Then in the link function, we get the input and add an event <span ng-transclude></span> for each letter that is written, update the counter.