Avascript function does not work when used ng-include Angularjs

Question

Avascript function does not work when used ng-include Angularjs

Asked 6 years, 5 months ago

Viewed 192 times

0

I’m doing an injection of tamplate via ng-include Angularjs. Inside this template I have a button that calls a modal which is inserted into the template by another injection. Until then everything works correctly. Inside the modal I have inputs and a button that should insert the information in the listing, but that’s what doesn’t work. It calls the right function, passes the values but does not insert in the listing. Let’s see the code.

app.controller("notasFiscaisProdutorLiquidacaoController", function($scope,$rootScope,$timeout){

    jQuery(document).ready(function(){
        jQuery("#btnAbrirModalNota").click(function(){
            jQuery("#modalAdicionarProduto").modal();
        });

        jQuery("#btnAbrirModalNotaLiquidacao").click(function(){
            jQuery("#modalAdicionarNotaLiquidacao").modal();
        });

    });

    $scope.etapa=1;
    $scope.primeiraEtapa='./arrecadacao/producaoPrimaria/producaoPrimariaPaginas/notasFiscais/primeiraEtapa.html'
    $scope.segundaEtapa='./arrecadacao/producaoPrimaria/producaoPrimariaPaginas/notasFiscais/segundaEtapa.html'
    $scope.terceiraEtapa='./arrecadacao/producaoPrimaria/producaoPrimariaPaginas/notasFiscais/terceiraEtapa.html'

    $scope.proximaEtapa = function () {
        $scope.etapa++;
    }
    $scope.anterior = function () {
        $scope.etapa--;
    }


    $scope.notas=[];
    $scope.nota={};
    $scope.nota.flagARendimento="0";
    $scope.tipoNota="0";

    $scope.adicionarNota = function (fechar) {
        $scope.notas.push($scope.nota);
        $scope.nota={}
        if (fechar) {
            $('#modalAdicionarProduto').modal('hide');
        }
    };

});

Main html

<html>
<meta charset="UTF-8"/>
<base href="/"></base>

<body>
<div ng-controller="notasFiscaisProdutorLiquidacaoController" class="voltar">
    <div class="col-md-12 " >
        <div ng-if="etapa==1" ng-include="primeiraEtapa"></div>
        <div ng-if="etapa==2" ng-include="segundaEtapa"></div>
        <div ng-if="etapa==3" ng-include="terceiraEtapa"></div>
        <div class="row">
            <div class="col-md-12 ">
                <div class="pull-right">
                    <button style="color: black;" type="button" ng-click="anterior()" ng-disabled="etapa==1" class="btn btn-default btnFiscal" id="btnVoltar">Voltar </button>
                    <button style="color: black;" type="button" ng-click="proximaEtapa()" ng-disabled="etapa==3"class="btn btn-default btnFiscal" id="btnProximo">Próximo </button>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
</html>

Html template

<div ng-controller="notasFiscaisProdutorLiquidacaoController" class="panel panel-primary container" id="containerEscolherEntidade">
    <div class="panel-heading container">Primeira etapa</div>

    <form novalidate name="frmNotasMultiplas" id="formCadastro1" role="form">
        <div class="row">
            <div  class="col-md-12">

                <div class="row">
                    <div  class="col-md-12">
                        <div  class=" form-group col-md-3">
                            <label class="lb">Data emissão</label> <input ng-required="nota.idSituacao==1" type="date" class="form-control" ng-model="nota.dataEmissao" date-format />
                        </div>

                        <div  ng-show="tipoNota==0" class=" form-group col-md-3">
                        <label class="lb">Série</label>
                        <input ng-required="true" maxlength="3" type="text" class="form-control"
                              ng-model="nota.serie" />
                    </div>                
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-12">
                        <div ng-show="tipoNota==1" class=" form-group col-md-12 ">
                            <button type="button" id="btnAbrirModalProduto" class="btn btn-default" >Adicionar Produto </button>
                        </div>
                    </div>
                </div>

                <div ng-show="tipoNota==1" class=" form-group col-md-12 ">
                    <table class="table table-bordered">
                        <thead>
                        <tr class="lb">
                            <th>Tipo</th>
                            <th>Série</th>
                            <th>Número</th>
                            <th>Opções</th>
                        </tr>
                        </thead>
                        <tbody ng-repeat="not in notas track by not.tipo">
                        <tr class="lb">
                            <td>{{not.tipo}}</td>
                            <td>{{not.serie}}</td>
                            <td>{{not.numero}}</td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </form>
    <div ng-include="'./arrecadacao/producaoPrimaria/producaoPrimariaPaginas/notasFiscais/modalAdicionarProdutoNota.html'"></div>
    <div ng-include="'./arrecadacao/producaoPrimaria/producaoPrimariaPaginas/notasFiscais/modalAdicionarProdutoNotaLiquidacao.html'"></div>

</div>

modal

<html>
<div  ng-controller="notasFiscaisProdutorLiquidacaoController">
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="modalAdicionarProduto" role="dialog">
    <div class="modal-dialog modal-lg">
        <br> <br> <br> <br>
        <div class="modal-content" >
            <div style="color: black; background-color: rgb(220, 220, 220);" class="modal-header">
                <button type="button" class="close" data-dismiss="modal" ng-click="limpaModalContadores()" >&times;</button>
                <h3>Produto</h3>
            </div>
            <div class="modal-body">
                <form novalidate name="frmNota" id="formCadastro" role="form">
                    <div class="row">
                        <div class='col-md-6' >
                            <label class="lb">Tipo</label>
                            <input type='text' class="form-control"  ng-model="nota.tipo" style="width: 100%"/>
                        </div>
                        <div class="col-md-3" >
                            <label class="lb">Série</label>
                            <input   type="text" class="form-control" ng-model="nota.serie"  />
                        </div>
                        <div class="col-md-3" >
                            <label class="lb">Número</label>
                            <input   type="text" class="form-control" ng-model="nota.numero"  />
                        </div>

                    </div>
                </form>
            </div>
            <div class="modal-footer" style="background-color: rgb(220, 220, 220);">
                <button style="color: black;" type="button" class="btn btn-default btnSalvar1" id="btnSalvarRegistro" ng-click="adicionarNota(true)">Adicionar</button>
                <button style="color: black;" type="button" class="btn btn-default btnSalvar1" ng-click="adicionarNota(false)" id="btnSalvarModal" >Adicionar e novo</button>
                <button style="color: black;" type="button" class="btn btn-default btnCancelar closed" ng-click="limpaModalAdicionarNotas()" data-dismiss="modal">Cancelar</button>
            </div>
        </div>
    </div>
</div>
</div>
</html>

2 answers

Browser other questions tagged javascript angularjs

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

by Italo Alan • 11 points · Answer 1 · 2018-07-20T12:13:47+00:00

You’re cleaning the object $scope.nota with $scope.nota={}.

Try to push with copy like this:

$scope.notas.push(angular.copy($scope.nota));

I noticed that you just display the listing if tipoNota==1, I don’t see at any time you assigning typoNote to 1, she is always 0.

by wmarquardt • **601** points · Answer 2 · 2018-08-08T03:16:35+00:00

In all templates (main, template and modal) the controller notasFiscaisProdutorLiquidacaoController is added. For angular, every time you add a controller in ng-controller a new instance is created. Maybe in this case, your script is trying to access a variable that is in another scope (another instance), it follows an example of controller added twice in a template:

angular.module('teste',[]);
var test = angular.module('teste');
angular.module('teste').controller('testCtrl', function($scope){
  $scope.someModel = {'value': 0}
  console.log('new instance');
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="teste">
    <div>
      <div ng-controller="testCtrl">
          <input type="number" ng-model="someModel.value">
          <p></p>value in controller: {{someModel.value}}</p>
       </div>
       <div ng-controller="testCtrl">
          <input type="number" ng-model="someModel.value">
          <p></p>value in controller: {{someModel.value}}</p>
       </div>
    </div>
  </body>