Angularjs and Laravel edit modal

Asked

Viewed 97 times

1

I am trying to make a Modal to edit my data, using Angularjs and Laravel as backend, but when I call a function in my ng-Ubmit(), 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

   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); 

    }
    )};
javascript angularjs laravel

  • Mixing jQuery with Angular? The change of this give m* is too big!

  • If you are using Angular Bootstrap, I advise using the ui-bootstrap for that reason.

  • I would guess that, after the completion of the modal opening, you would have to call $scope.$apply(), since jQuery would run outside the Angular "cycle".

2 answers

1

I guess since jQuery doesn’t follow the Angular’s "Digest Cycle," you’d have to perform a $scope.$apply() so Angular can recognize the data change in its modal.

I would do something like this:

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

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

I don’t know if that solves the problem, it’s just a kick. But I do not recommend to anyone to mix jQuery with Angular, because the use of the two are given [and the purpose is] in cases of different uses.

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

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

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

0


Guys, I found the mistake. It was actually a glitch. The modal was out of my NGCONTROLLER. That’s why ng-Submit() didn’t call the function. Now it’s picking up normal. Thank you!!

Browser other questions tagged javascript angularjs laravel

You are not signed in. Login or sign up in order to post.