angularJS preventing click event in ng-file-upload

Question

I've read questions such as

I've also read some other questions related. I'm a newbie in angularJS and very used to jQuery. I have triggered a click button event in another use case and worked just fine, but in this use case that uses the same ng-file-upload directive doesn't work.

Here's my JS

'use strict';

angular.module('waspPortalApp')
  .controller('UploadNotaFiscalCtrl', ['$scope', '$timeout', 'Session', 'RequisicaoService', 'AlertService', 
    function($scope, $timeout, Session, RequisicaoService, alertService) {

      var objetoPedido = {};

      $scope.idCia = Session.get().ciaUsuarioPK.idCia;

      $scope.uploadDeNotaFiscal = function() {
          var idPedido = parseInt($('#campoPedidoUploadNota').val());
          if (!$.isNumeric(idPedido) || idPedido < 1) {
              alertService.error('N&uacute;mero do pedido inv&aacute;lido', 'Por favor, informe o n&uacute;mero do pedido ou informe um n&uacute;mero de pedido v&aacute;lido.');
              return;
          }

          alertService.informativo('Recuperando informa&ccedil;&otilde;es do pedido', 'Por favor, aguarde enquanto recuperamos informa&ccedil;&otilde;es do pedido selecionado.');
          RequisicaoService.getRequisicaoPo({
              idCia: $scope.idCia,
              listaPedidos: idPedido,
              dataEmissaoPedidoDe: '',
              dataEmissaoPedidoAte: '',
              listaCnpj: ''
          },
          function (dados) {
              objetoPedido = JSON.parse(angular.toJson(dados))[0];
              if (objetoPedido.gnre) {
                  $('#modalInserirGNRE').modal('show');
              } else {
                  $('.botao-upload-nota-fiscal')[0].click();
              }
          },
          function (httpResponse) {
          });
        };

        $scope.upfiles = [{}];


      $scope.$watch('upfiles', function () {
          var file = $scope.upfiles[0];
          if (file.name === undefined) {
              return;
          }

          var valorGNRE = $('#campoGNRE').val() ? $('#campoGNRE').val().replace(/[^\d,]+/g, '').replace(',', '.') : '0.00';
          $('#campoGNRE').val('');

          $scope.upObj = RequisicaoService.uploadNotaFiscal($scope.idCia, $('#campoPedidoUploadNota').val(), file, valorGNRE)
                    .success(function (data, status, headers, config) {

            }
            ).error(function (data, status, headers, config) {

            });
      });
    }
  ]);

The HTML

<div class="panel panel-default" ng-controller="UploadNotaFiscalCtrl">
    <div style='position:inherit; margin-top:10px;'>
        <br>

        <div style='float:left;'>
            <label class="col-sm-4 control-label" title="Digite o n&uacute;mero do pedido" style='width: 75px; padding-top: 4px;' for="campoPedidoUploadNota">
                Pedido:
            </label>

            <input id="campoPedidoUploadNota" style="margin-left:10px; width:120px; height: 30px;" class="form-control" title="Digite o n&uacute;mero de Pedido" type="text">
        </div>
     </div>

     <div class="panel-footer text-right" style="margin-top: 50px;">
       <button type="button" class="btn btn-default" title="Upload de NF" ng-click="uploadDeNotaFiscal()"><i class="fa fa-upload">&nbsp;</i>Upload de NF</button>
     </div>
</div>

<div class="modal fade" id="modalInserirGNRE" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" ng-class="{'modal-sm': size == 'sm', 'modal-sm': size == 'sm'}">
        <div class="modal-content">
            <div class="modal-header panel-footer">
                <h3 class="panel-title">Informe o valor de GNRE:</h3>
            </div>
            <div class="form-group" style="height: 70px; max-height: 70px;">
              <label class="col-sm-12 control-label" style="margin-bottom: 10px; margin-top: 10px">
                  <div style="float: left; padding-bottom: 15px; padding-left: 1px; padding-right: 15px; padding-top: 15px;" class="modal-body">
                      <input id="campoGNRE" style="margin-left:1px; width:250px; height: 30px;" class="form-control" type="text" placeholder="Valor GNRE">
                  </div>
                  <div style='float:right;' class="modal-body text-right">
                      <button type="button" class="btn btn-default botao-upload-nota-fiscal" style="margin-left: 10px; padding-top: 4px; height: 30px; color: #FFFFFF; background-color: #5CB85C;" ng-file-select="upfiles" ng-model="upfiles" ng-multiple="false">Selecionar Nota Fiscal</button>
                  </div>
              </label>
            </div>
            <div class="modal-footer panel-footer"></div>
        </div>
    </div>
</div>

I have tried using $timeout as it was suggested in one of the answers in one of these related questions but still no luck. I have tried writing a directive as sugested in one of the answers too but still did not manage to succed.

Any ideas on what's wrong?

EDIT:

If I move $('.botao-upload-nota-fiscal').click() to outside the ajax request, the button get clicked. The problem now becomes that I don't actually have the object loaded and can't do the validation such as is done in the success handler.

It is unclear as to what you are asking. Are you referring to ` — jperezov, Jan 25 '16 at 23:44
No. I have a button and I want to programatically click it. Something like $('#id').click () — Philippe Gioseffi, Jan 25 '16 at 23:53
Sounds like some backwards thinking....shouldn't ever need to do that in angular...should be calling a scoped function that does whatever it is you need to do. You have a hwole bunch of jQuery mixed on top of angular which is reaally a bad approach — charlietfl, Jan 25 '16 at 23:55
In the function executed by your click, just do `event.stopImmediatePropagation();` and `event.preventDefault()`. Make sure that `event` is a parameter in said function, i.e. `function(event) { ... }`. — jperezov, Jan 25 '16 at 23:55
Have a good read through : [thinking-in-angularjs-if-i-have-a-jquery-background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — charlietfl, Jan 25 '16 at 23:57
I'm still getting used to angular. Before last November I've never worked with it. What I do want is do run the upfiles method defined in my JS, and that's done with the button. — Philippe Gioseffi, Jan 25 '16 at 23:57
and that would be jQuery methodology...understood. In angular you think opposite... you manage data model first and let dom events interact with your model. So anything that button would do...can be done from controller or directive already ... and you just call that function — charlietfl, Jan 25 '16 at 23:59
@charlietfl. I have already read this question too. And yes, this is a jQuery way to think. If you read my code I'm still getting used to angular. I retrieved the button with jQuery instead of angular.element which I just fundo out about. — Philippe Gioseffi, Jan 26 '16 at 00:02
So think through this ... user adds files, they get pushed into the model. When ready to upload, a user event in UI would trigger controller function. Response updates model which in turn angular updates view internally. So let controller do the uploads and you don't need to trigger click...just call controller function — charlietfl, Jan 26 '16 at 00:03
The problem is the usecase itself. The user clicks a button and depending on the object returned fields I have to display a modal so the user fills out the rest of the information. When this happens the user clicks the button and the uploads screen shows and everything go on just fine. But When the object is already filled out and I do not need user interaction I try to click the button and nothing happens. What is really strange is that I have done it in another JS file and worked. — Philippe Gioseffi, Jan 26 '16 at 00:09
I think you should try to minimize the amount of code in your question. Although I read the question, my first instinct was to scroll down and click out onto the next question. Maybe if you made it a little smaller, remove clutter and irrelevant code, it would be much easier to help. — Hanlet Escaño, Jan 26 '16 at 00:27

angularJS preventing click event in ng-file-upload

0 Answers0