在一個視圖中的多個控制器AngularJS + Laravel

-1

我正在編碼一個單一的crud應用程序，我需要在一個視圖中使用兩個控制器，但我不知道如何。在一個視圖中的多個控制器AngularJS + Laravel

當用戶按下「添加Colaborador」按鈕時，應用程序需要搜索「Função」寄存器並在選擇（Html函數）中顯示。（一個「Colaborador」有一個「Funcao」）。

這裏是我的代碼： http://pastebin.com/uUzE5K28

對於使用，我需要將控制器更改爲「funcoesController」，然後再回來「colaboradoresController」。

對不起，英語不好！

來源

2016-06-27 Vinicius Savitraz

只需用'app.controller（...'）創建兩個控制器，然後將每個控制器的'ng-controller'放置在任何您認爲是控制器範圍邊界的視圖元素上。 –

對不起，但我是新的使用angularjs，我不知道如何做到這一點我在哪裏把app.controller？ –

聽起來像你需要通過一些角度的教程，如https://docs.angularjs.org/tutorial – charlietfl

Angular can nest控制器。所以你可以在另一個控制器中嵌入一個控制器。在嵌套控制器中，您可以訪問任一控制器。

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

來源

2016-06-27 00:33:23

我' m gettin此錯誤：angular.js：13550錯誤：[ng：areq]參數'funcoesController'不是一個函數，得到undefined http://errors.angularjs.org/1.5.5/ng/areq?p0=funcoesController&p1 = not％20a％20function％2C％20got％20undefined下面是完整的代碼：http://pastebin.com/4jaAtNBx –

您需要在視圖中包含包含您的控制器的腳本庫。 s –

你應該不是來自同一個視圖訪問兩個控制器。當一個控制器發生改變並開始注意到意想不到的地方發生崩潰時，這種交叉依賴性很可能會讓你瘋狂。

您的Laravel控制器可以將所有需要的數據傳遞到您的視圖，包括將查找數據作爲附加數組變量。這是最簡單的方法。

Laravel有許多不同的方式將其他數據傳遞到您的視圖。除了直接變量引用外，您還可以創建View Composers或使用Service Injection（在Laravel 5.2中）將服務提供者注入到視圖中。如果您需要在多個地方使用相同的參考數據來保持代碼乾燥，您可能希望選擇這種解決方案。

來源

2016-06-27 04:03:45 Malta

在一個視圖中的多個控制器AngularJS + Laravel

回答

相關問題