Question

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

当用户按下“添加Colaborador”按钮时，应用程序需要搜索“Função”寄存器，并在select（Html函数）中显示。（一个“Colaborador”有一个“Funcao”）。

使用时，我需要将控制器更改为“funcoesController”，然后返回“colaboradoresController”。

抱歉英语不好！

Answer 1

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>

Answer 2

您不应该从同一视图访问两个控制器。当一个控制器中的内容发生变化并开始注意到意外位置的崩溃时，这种交叉依赖很可能会让你发疯。

您的Laravel控制器可以将所有需要的数据传递到您的视图，包括将查找数据作为附加数组变量。这是最简单的方法。

Laravel有许多不同的方法可以将额外的数据传递给您的视图。除了直接变量引用之外，您还可以使用View Composers（在Laravel 5.2中）创建Service Injection或将服务提供者注入到您的视图中。如果您需要在多个位置使用相同的参考数据以保持代码DRY，您可能希望选择此类解决方案。

一个视图中的多个控制器AngularJS + Laravel

2 个答案: