3

Olá

Ao clicar no link:

<a href="" class="btn btn-info btn-block" ng-click="editarCliente(cliente)">

abre um modal (bootstrap) e deve exibir os dados contidos no cliente.

Estou usando angular ui

Segue o $scope

$scope.editarCliente = function($cliente) {

    $scope.clienteEdit = {
        CliNome: $cliente.cli_nome,
        CliTelefone: $cliente.cli_telefone,
        CliEmail: $cliente.cli_email,
        CliDescricao: $cliente.cli_descricao
    };

     var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'clienteController',
      //size: size,
      resolve: {
        cliente: function () {
          return $scope.clienteEdit;
        }
      }
    });

Obs: abre o modal sem problemas:

<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
    <h3 class="modal-title">Editar</h3>
</div>
<div class="modal-body">
    <ul>
        <li ng-repeat="item in items">
            <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
        </li>
    </ul>
    Selected: <b>{{ clienteEdit.CliNome }}</b>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="ok()">Salvar</button>
    <button class="btn btn-warning" type="button" ng-click="cancel()">Fechar</button>
</div>

Mas não exibe o conteudo do $scope

3
  • clienteController é o Controller onde está sua função editar? Commented 1/08/2016 às 11:58
  • tá no scope... $scope.editarCliente
    – novato
    Commented 1/08/2016 às 12:39
  • Sim, mas esse clienteController é próprio pro modal? Commented 1/08/2016 às 12:44

1 Resposta 1

2

Como não vi seu código completo ainda não entendi muito bem, mas vamos lá. Nesse exemplo temos dois Controllers, um é responsável apenas pelo Modal. Repare que da mesma forma que você retorna o cliente no resolve eu também retorno.

Depois no Controller do modal injetamos o cliente:

.controller("ModalCtrl", function($scope, $modalInstance, cliente) {..}

Em seguida você pode pegar o valores que foram passados.

$scope.cliente = cliente;

E depois é só passar pra sua view:

<div class="modal-body">
   {{cliente .nome}}
</div>

Exemplo Completo:

angular.module("myApp", ['ui.bootstrap'])

    .controller("MyCtrl", function($scope, $modal) {
        $scope.showModal = function() {
          
            $scope.cliente = {
                id: 1,
                nome: 'Diego',
                idade: 23
            }
            
            $modal.open({
                templateUrl: 'myModal.html',
                controller: 'ModalCtrl',
                resolve: {
                    cliente: function() {
                        return $scope.cliente;
                    }
                }
            });
        }
    })

.controller("ModalCtrl", function($scope, $modalInstance, cliente) {
    $scope.clente = cliente;
    console.log(cliente);
    $scope.ok = function() {
        $modalInstance.close();
    };

    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };
});
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-0.11.0.min.js"></script>
<script src="https://rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-0.11.0.min.js"></script>



<div ng-app="myApp">
    <script type="text/ng-template" id="myModal.html">
        <div class="modal-header">
            <h3 class="modal-title">Modal title</h3>
        </div>
        <div class="modal-body">
            {{clente.nome}}
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>
    
    <div ng-controller="MyCtrl">
        <input type="button" value="Show modal" ng-click="showModal()"/>
    </div>
</div>

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 .