I'm coding a single crud application, and i need to use two controllers in one view, but i dont know how.
When the user press the "Add Colaborador" button, the application needs to search the "Função" registers, and show in a select(Html function). (One "Colaborador" have one "Funcao").
Here's my code: http://pastebin.com/uUzE5K28
For use the , i need to change the controller to "funcoesController", then come back to "colaboradoresController".
Sorry for bad english!
分享 Angular can nest controllers. So you can embed one controller in another controller. Within the nested controller, you can access either controller.
<!DOCTYPE html>
<html lang="pt-br" ng-app="registrosGerais">
<head>
<title>Sistema Pronatec</title>
<!-- Load Bootstrap CSS -->
<link href="<?= asset('css/bootstrap.min.css') ?>" rel="stylesheet">
</head>
<body>
<h2>Gerenciamento de Colaboradores</h2>
<div ng-controller="colaboradoresController">
<!-- Nest second controller -->
<div ng-controller="funcoesController">
<button id="btn-add" class="btn btn-primary btn-xs" ng-click="toggle('add', 0)">Novo Colaborador</button>
<!-- Table-to-load-the-data Part -->
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Função</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="clb in tbcolaborador">
<td>{{clb.id}} </td>
<td>{{ clb.nome }}</td>
<td>{{ clb.funcao_id}}</td>
<td>
<button class="btn btn-default btn-xs btn-detail" ng-click="toggle('edit', clb.id)">Editar</button>
<button class="btn btn-danger btn-xs btn-delete" ng-click="confirmDelete(clb.id)">Remover</button>
<button class="btn btn-info btn-xs btn-detail" ng-click="addConta(clb.id)">Adicionar Conta Banco</button>
</td>
</tr>
</tbody>
</table>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">{{form_title}}</h4>
</div>
<div class="modal-body">
<form name="frmColaboradores" class="form-horizontal" novalidate="">
<div class="form-group error">
<label for="inputNome" class="col-sm-3 control-label">Nome</label>
<div class="col-sm-9">
<input type="text" class="form-control has-error" id="nome" name="nome" placeholder="Nome completo" value="{{nome}}" ng-model="colaborador.nome" ng-required="true">
<span class="help-inline" ng-show="frmColaboradores.nome.$invalid && frmColaboradores.nome.$touched">Nome é obrigatório</span>
</div>
</div>
<div class="form-group error">
<label for="inputFuncao" class="col-sm-3 control-label">Função</label>
<div class="col-sm-9">
<select>
<option ng-repeat = "clb in tbfuncao" value "{{ clb.id }}"> {{ clb.nome }} </option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btn-save" ng-click="saveColaborador(modalstate, id)" ng-disabled="frmColaboradores.$invalid">Salvar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Load Javascript Libraries (AngularJS, JQuery, Bootstrap) -->
<script src="<?= asset('app/lib/angular/angular.js') ?>"></script>
<script src="<?= asset('js/jquery.min.js') ?>"></script>
<script src="<?= asset('js/bootstrap.min.js') ?>"></script>
<!-- AngularJS Application Scripts -->
<script src="<?= asset('app/app.js') ?>"></script>
<script src="<?= asset('app/controllers/colaboradores.js') ?>"></script>
</body>
