Modal to edit Angularjs and Laravel

1

I'm trying to make a Modal to edit my data, using AngularJS and laravel as backend, but when I call a function in my ng-submit (), it is not invoked.

This is my 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>

And this is my code 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); 

    }
    )};
    
asked by anonymous 01.06.2018 / 03:49

2 answers

0
Well, I found the error. In fact, it was a hesitation. The modal was out of my NGCONTROLLER. This is why ng-submit () did not call the function. Now it's getting normal. Thank you !!

    
01.06.2018 / 17:03
1

I kicked that since jQuery does not follow the "Cycle Digest" of the Angular, you would have to execute a $scope.$apply() so that Angular can recognize the change of data in its modal.

I would do something like this:

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

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

I do not know if this solves the problem, it's just a kick. But I would not recommend anyone to mix jQuery with Angular, as the use of the two will take place [and the purpose will be] in cases of different uses.

In your case, I would recommend using ui-bootstrap .

link

I use it and I find it more practical than blending your Angular code with jQuery.

    
01.06.2018 / 16:57