Multiple Controllers in one view AngularJS + Laravel



我正在编写一个单一的crud应用程序,我需要在一个视图中使用两个控制器,但我不知道如何。

当用户按下"添加协作器"按钮时,应用程序需要搜索"funo"寄存器,并显示在一个select(Html函数)中。(一个"Colaborador"有一个"Funcao")。

下面是我的代码:http://pastebin.com/uUzE5K28

为了使用,我需要将控制器更改为"funcoesController",然后返回到"colaboradoresController"。

对不起,我的英语不好!

Angular可以嵌套控制器。你可以在一个控制器中嵌入另一个控制器。在嵌套的控制器中,您可以访问任意一个控制器。

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

不应该从同一个视图访问两个控制器。这种交叉依赖很可能会让你抓狂,当你改变一个控制器的东西,并开始注意到意想不到的地方崩溃。

你的Laravel控制器可以传递所有需要的数据给你的视图,包括查找数据作为一个额外的数组变量。这是最简单的方法。

Laravel有许多不同的方式来传递额外的数据给你的视图。除了直接的变量引用,你还可以创建View composer或通过service Injection(在Laravel 5.2中)将服务提供者注入到视图中。如果您需要在多个地方使用相同的引用数据来保持代码DRY,那么您可能希望选择这种解决方案。

最新更新