0

Estou tentando pegar as informações do input e passar para meu scopo do controller mas algo está errado e não consegui identificar oque pode ser se alguém puder ajudar agradeço

<section class="container" id="citys" ng-controller="CtrlTypeProperties"> 
 <script type="text/ng-template" id="modal-type-properties.html">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <form action="" method="post">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Adicionar Tipo de Im&oacute;vel</h4>
          </div>
          <div class="modal-body">
                <input type="text" class="form-control" ng-model="nameCity" name="name" placeholder="Cidade" />
          </div>
          <div class="modal-footer">
            <button type="button" ng-click="cancel()" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
            <button type="button" class="btn btn-primary" ng-click="add_type_properties()">Adicionar</button>
          </div>
        </form>
    </div>
  </div>
 </script>
</section>

<script>
  app.controller('CtrlTypeProperties', function($scope, $modal, $http){
   $scope.open_modal = function (){
    $modal.open({
        templateUrl: 'modal-type-properties.html',
        controller: 'ModalInstanceCtrl',
        resolve: {
            name: function () {                     
                return $scope.nameCity;
            }
        }
    });
  }
});

 app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, name){ 
      $scope.name = '';
      console.log($scope.name);

      $scope.add_type_properties = function () {
         console.log($scope.name);
      };

      $scope.cancel = function () {
          $modalInstance.dismiss('cancelado'); 
      };
   });
</script>

Tudo que eu preciso é pega o valor do input e atualizar o scope do controller do modal

1 Resposta 1

1

Este é o código funcionando logo abaixo. Antes vou te explicar 2 sacadas do componente modal.

  1. Você deve escutar o fim do modal com .then() e manipular o resultado. Fiz isto definindo uma variável de nome modalInstance var modalInstance = $modal.open({...}); e escutando a conclusão do modal em seguida no .then() assim: modalInstance.result.then(...);.
  2. Para conseguir two-way databinding neste modelo de modal (alterar o valor no formulário e na variável ao mesmo tempo), você deve instanciar a variável dentro de um objeto e não em uma variável na raiz do $scope. Exemplo correto: $scope.data = { name : name } em vez de $scope.name = name }

<!DOCTYPE html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-app="myApp">
  


<section class="container" id="citys" ng-controller="CtrlTypeProperties"> 
<button ng-click="open_modal()">Show modal</button>
<p>Cidade: '{{name}}'</p>
 <script type="text/ng-template" id="modal-type-properties.html">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <form action="" method="post">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Adicionar Tipo de Im&oacute;vel</h4>
          </div>
          <div class="modal-body">
                <input type="text" class="form-control" ng-model="data.name" name="name" placeholder="Cidade" />
          </div>
          <div class="modal-footer">
            <button type="button" ng-click="cancel()" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
            <button type="button" class="btn btn-primary" ng-click="add_type_properties()">Adicionar</button>
          </div>
        </form>
    </div>
  </div>
 </script>
</section>

<script>
var app = angular.module('myApp', ['ui.bootstrap']);
  app.controller('CtrlTypeProperties', function($scope, $modal, $http){
    $scope.name = '';
    $scope.open_modal = function() {
      var modalInstance = $modal.open({
          templateUrl: 'modal-type-properties.html',
          controller: 'ModalInstanceCtrl',
          resolve: {
              name: function () {
                  return $scope.name;
              }
          }
      });


      modalInstance.result.then(resultado => {
        console.log('resultado: '+ resultado);
        $scope.name = resultado;
      });
    }
});

 app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, name){ 
      $scope.data = {
        name: name
      }

      $scope.add_type_properties = function () {
         console.log('close: '+ $scope.data.name);
         $modalInstance.close($scope.data.name);
      };

      $scope.cancel = function () {
          $modalInstance.dismiss('cancelado'); 
      };
   });
</script>


</body>

1
  • Muito Obrigado amigo, fiz várias pesquisas até achei esse meio mas como estou caminhando ainda com o angularjs não consegui finalizar. Funcionou como eu esperava obrigado mesmo 24/09/2019 às 13:56

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 .