2016-06-27 2 views
-1

Я кодирую одно приложение crud, и мне нужно использовать два контроллера в одном представлении, но я не знаю, как это сделать.Несколько контроллеров в одном виде AngularJS + Laravel

Когда пользователь нажимает кнопку «Добавить Colaborador», приложение должно искать регистры «Função» и показывать в выбранной функции (Html). (Один «Colaborador» имеет один «Funcao»).

Вот мой код: http://pastebin.com/uUzE5K28

Для использования, мне нужно изменить контроллер «funcoesController», а затем вернуться к «colaboradoresController».

Извините за плохой английский!

+0

Просто создайте два контроллера с помощью 'app.controller (...'. Затем поместите 'ng-controller' для каждого контроллера на любой элемент вашего вида, который вам нравится быть границей области управления. –

+0

извините, но я новый, используя angularjs, и я не знаю, как это сделать.Когда я ставлю 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

I ' m gettin this error: 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 –

+0

Вам нужно включить библиотеку скриптов, содержащую ваш контроллер в представлении. Я предполагаю, что это i s

0

Вы не должны получать доступ к двум контроллерам с той же точки зрения. Такая кросс-зависимость скорее всего сведёт вас с ума, когда вы измените ситуацию в одном контроллере и начнете замечать сбои в неожиданных местах.

Ваш контроллер Laravel может передать все необходимые данные вашему представлению, включая данные поиска в качестве дополнительной переменной массива. Это самый простой способ.

У Laravel есть много разных способов передать дополнительные данные вашим представлениям. Помимо прямых ссылок на переменные, вы можете создать View Composers или ввести поставщиков услуг в свои виды с помощью Service Injection (в Laravel 5.2). Вы бы хотели выбрать такие решения, если вам нужны одни и те же справочные данные в нескольких местах, чтобы сохранить код DRY.

Смежные вопросы