1

Estou tentando fazer um Modal para editar meus dados, usando AngularJS e laravel como backend, porem quando eu chamo um funçao no meu ng-submit(), ela não é invocada.

Esse é meu modal

    <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form ng-submit="salvar()">
            total:<input type="" ng-model="editar.total"  name="total">
            total:<input type="" ng-model="editar.quantidade_produtos"  name="quantidade_produtos">
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" type="submit" class="btn btn-primary">Save changes</button>
                </div>
        </form>
      </div>
    </div>
  </div>
</div>

E esse é meu codigo angularjs

   var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $http) {

    $scope.editar = function(data){
        $scope.modal = data;
        $('#mymodal').modal('show');
    }

    $scope.salvar = function(){
        $scope.editar = {}
        $scope.d = $scope.modal.id;
        console.log($scope.editar); 

    }
    )};
3
  • Misturando jQuery com Angular? A change de isso dar m* é muito grande! 1/06/2018 às 14:48
  • Se estás usando Bootstrap com Angular, aconselho usar o ui-bootstrap para isso. 1/06/2018 às 14:48
  • Eu chutaria que, depois da conclusão da abertura do modal, você teria que chamar $scope.$apply(), já que o jQuery rodaria fora do "ciclo" do Angular. 1/06/2018 às 14:50

2 Respostas 2

1

Eu chuto que, como o jQuery não acompanha o "Ciclo Digest" do Angular, você teria que executar um $scope.$apply() para o Angular poder reconhecer a mudança de dados na sua modal.

Eu faria algo assim:

$('#mymodal').modal('show');

$('#myModal').on('shown.bs.modal', function () {
      $scope.$apply(); 
})

Não sei se isso resolve o problema, é apenas um chute. Porém não recomendo a ninguém misturar jQuery com Angular, pois o uso dos dois se darem [e o propósito ser] em casos de usos diferentes.

No seu caso, eu recomendaria usar o ui-bootstrap.

https://angular-ui.github.io/bootstrap/

Eu uso ele e acho mais prático que misturar o seu código Angular com jQuery.

0

Galera, encontrei o erro. Na verdade foi um vacilo. O modal estava fora do meu NGCONTROLLER. Por isso o ng-submit() não chamava a funçao. Agora está pegando normal. Obrigado!!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .