Display data in modal by angular ui

Question

Hello

By clicking on the link:

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

opens a modal (bootstrap) and shall display the data contained in cliente.

I’m using angular ui

Follows the $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;
        }
      }
    });

Note: opens the modal without problems:

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

But it doesn’t show the contents of $scope

Answer 1

Since I haven’t seen your full code, I’m not sure yet, but come on. In this example we have two Controllers, one is only responsible for Modal. Note that in the same way that you return the client on resolve me too return.

Then in the Controller modal we inject the customer:

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

Then you can take the values that were passed.

$scope.cliente = cliente;

And then just go to your view:

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

Complete Example:

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>