Forever loop into controller method

[joweste]

I am using x-editable angularjs.

When I click to edit a form, I have seen a forever loop into the next method of the controller:

"$scope.ShowMedicamento" called into

{{ ShowMedicamento(item) || 'n/a' }}

I put a log into this method, and I can see it running forever.

After go out from edit mode, the loop stops.

The app works well, but I can see a intensive loop in this method when entering in edition mode.

Is this a normal behaviour?

//controller .... $scope.ShowMedicamento=function(item){ console.log(item.medicamento) return (item.medicamento)?item.medicamento:'N/A' }

//markup

 <form editable-form name="tableform" onaftersave="saveTablePresc()" oncancel="canceledit()" id="formprescricao">
    <!-- table -->
    <table class="table table-bordered table-hover table-condensed">
      <tr style="font-weight: bold">
        <td style="width:40%">Medicamento</td>
        <td style="width:30%" ng-show="tableform.$visible"><span>Ação</span></td>
      </tr>
      <tr ng-repeat="item in atendimento.prescricao_adotada.medicamentos | filter:filterPresc">
        <td>

               <span editable-text="item.medicamento" e-form="tableform" onbeforesave="checkPresc($data, item.$index)">
                  {{ ShowMedicamento(item) || 'n/a' }}
                </span>
               <div>
                <i ng-show="item.loading" class="glyphicon glyphicon-refresh">Carregando..</i>
                <div ng-show="item.noResults">
                  <i class="glyphicon glyphicon-remove"></i> Sem resultados
                </div>
              </div>
        </td>
        <td ng-show="tableform.$visible">
          <button type="button" ng-click="deleteItemPresc(item)" class="btn btn-danger pull-right">
            <i class="fa fa-trash-o" aria-hidden="true"></i>
          </button>
        </td>
      </tr>
    </table>

    <!-- buttons -->
    <div class="btn-edit">
      <button type="button" class="btn btn-primary" ng-show="!tableform.$visible" ng-click="tableform.$show()">
       <i class="fa fa-pencil-square-o" aria-hidden="true"></i>&nbsp;Editar Receita
      </button>
    </div>
    <div class="btn-form" ng-show="tableform.$visible">
      <button type="button" ng-disabled="tableform.$waiting" ng-click="addItemPres()" class="btn btn-info pull-right">
      <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;Adicionar
      </button>
      <button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary">
      <i class="fa fa-floppy-o" aria-hidden="true"></i>&nbsp;Salvar
      </button>
      <button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-success">
        <i class="fa fa-close"></i>&nbsp;Fechar
      </button>
    </div> 
  </form>

[ckosloski]

I think it is because Angular is putting a watch on the function. You could try {{ ::ShowMedicamento(item) || 'n/a' }} and see what that does. Also you are doing two null checks with that function, why not just do {{item.medicamento || 'N/A'}}

[joweste]

Yes, I already did it and put your tip. About the watch in the function, Is angular putting a watch in the function or x-editable is doing it?

[ckosloski]

Angular is doing it because of the two way binding.