AngularJs - Object counter does not work within the directive

0

I have a directive that adds text field on the screen through a templateurl. I need each field created to generate an ID of those fields based on the count of existing objects in a div ('# xmain'). I use an If to know which type of field I want to return, but when I change the field type the count does not work.

JS

var counter= document.getElementsByClassName('campos').length;    
    function btncampos($compile) {
      return {
        restrict: 'E',
        scope: {titulo: '@',icone:'@',corfundo:'@',tipo:'@'  },
        template: "<button type='button' class='btn btn-{{corfundo}} m-r-sm' ng-click='add()'><i class='fa {{icone}}'></i></button><span class='campos-texto'>{{titulo}}</span>",
        controller: function ($scope, $templateRequest,$element,$templateCache,formsAPI,$window) {        

          $scope.add = function () {
            counter++;            

            if ($scope.tipo=='txtcurto'){              
              $templateRequest("modulos/forms/_textbox?c="+counter+"&t=curto").then(function(html){
                var template = angular.element(html);            
                angular.element('#xmain').append(template)
                el=$compile(template)($scope);
              });
            }
            else if ($scope.tipo=='txtlongo'){              
              $templateRequest("modulos/forms/_textbox?c="+counter+"&t=longo").then(function(html){
                var template = angular.element(html);            
                angular.element('#xmain').append(template)
                el=$compile(template)($scope);
              });
            }            
          };
        }
      };
    }

ASP

<%
codigo = request.querystring("c")
tipo = request.querystring("t")

select case tipo
%>


<%case "curto"%>
<div id="cmp<%=codigo%>" class="campos form-group disabled col-md-6 animated bounceInRight" ng-controller="modalCtrl" > 
    <label data-id="lbl<%=codigo%>" id="lbl<%=codigo%>" >{{titulo}}</label> 
    <div class="input-group">
        <input type="text" class="form-control">        
        <span class="input-group-btn"> 
            <button type="button" class="btn btn-default" ng-click="openmodal('lbl<%=codigo%>')"><i class="fa fa-pencil"></i></button> 
            <button type="button" class="btn btn-default" ng-click="remove(<%=codigo%>)"><i class="fa fa-remove"></i></button>              
        </span>
    </div>
</div>



<%case "longo"%>
<div id="cmp<%=codigo%>" class="campos form-group disabled col-md-12 animated bounceInRight" ng-controller="modalCtrl" >    
    <label data-id="lbl<%=codigo%>" id="lbl<%=codigo%>" >{{titulo}}</label> 
    <div class="input-group">
        <input type="text" class="form-control">        
        <span class="input-group-btn"> 
            <button type="button" class="btn btn-default" ng-click="openmodal('lbl<%=codigo%>')"><i class="fa fa-pencil"></i></button> 
            <button type="button" class="btn btn-default" ng-click="remove(<%=codigo%>)"><i class="fa fa-remove"></i></button>              
        </span>
    </div>
</div>



<%end select%>

Result

    
asked by anonymous 01.11.2016 / 00:12

1 answer

0

Above the directive I declared the variable empty

 var counter=""

and within the controller of the directive I duplicated in each if the count of objects of the div.

if ($scope.tipo=='txtcurto'){
  counter= document.getElementsByClassName('campos').length;
  counter++                  
  $templateRequest("modulos/forms/_textbox?c="+counter+"&t=curto").then(function(html){
    var template = angular.element(html);            
    angular.element('#xmain').append(template)
    el=$compile(template)($scope);
  });
}
else if ($scope.tipo=='txtmedio1'){              
  counter= document.getElementsByClassName('campos').length;
  counter++
  $templateRequest("modulos/forms/_textbox?c="+counter+"&t=medio1").then(function(html){
    var template = angular.element(html);            
    angular.element('#xmain').append(template)
    el=$compile(template)($scope);
   });
}//if
    
01.11.2016 / 19:15