2016-06-27 15 views
-1

1つのアプリケーションを作成していますが、2つのコントローラを1つのビューで使用する必要があります。複数のコントローラを1つのビューで表示AngularJS + Laravel

"Add Colaborador"ボタンを押すと、アプリケーションは "Função"レジスタを検索し、select(Html関数)で表示する必要があります。 (「Colaborador」には「Funcao」が1つあります)。ここで

は私のコードです:使用するために http://pastebin.com/uUzE5K28

、私は戻って「colaboradoresController」に来た後、「funcoesController」にコントローラを変更する必要があります。

ご迷惑をかけて申し訳ありません。

+0

'app.controller(...')で2つのコントローラを作成して、コントローラスコープの境界線にしたいビューのどの要素にでも各コントローラの 'ng-controller'を入れてください。 –

+0

申し訳ありませんが、私はapp.controllerをどこに置くのですか? –

+0

https://docs.angularjs.org/tutorial/のような角度チュートリアルを行う必要があると聞きました – charlietfl

答えて

0

角型コントローラはネストできます。したがって、あるコントローラを別のコントローラに組み込むことができます。ネストされたコントローラ内で、いずれかのコントローラにアクセスできます。

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

+0

私は、このエラーを取得する:angular.js:13550エラー:[ng:areq]引数 'funcoesController'は関数ではなく、定義されていません http://errors.angularjs.org/1.5.5/ng/areq?p0=funcoesController&p1 = not%20a%20function%2C%20got%20undefined完全なコードは次のとおりです:http://pastebin.com/4jaAtNBx –

+0

あなたのコントローラを含むスクリプトライブラリをビューに含める必要があります。

0

あなたは同じビューから二つのコントローラにアクセスするべきではありません。この種の相互依存性は、あるコントローラーのものを変更して予期せぬ場所でクラッシュすることに気付くと、あなたを狂わせる可能性が非常に高いでしょう。

Laravelコントローラは、参照データを追加の配列変数として含め、必要なすべてのデータをビューに渡すことができます。それは最も簡単な方法です。

Laravelには、ビューに追加データを渡すさまざまな方法があります。直接変数参照の他に、View Composersを作成するか、Service Injection(Laravel 5.2)でビューにサービスプロバイダを挿入することができます。コードDRYを維持するために複数の場所で同じ参照データが必要な場合は、この種のソリューションを選択することをお勧めします。

関連する問題