0

Tenho a seguinte dúvida: Estou montando uma página, onde eu tenho um controller chamado PageController, responsável por renderizar o menu e título da página.

Porém, dentro da div onde eu uso ng-controller="PageController", preciso definir o local onde a página será renderizada - estou usando o angular-route. Sendo assim, teoricamente, eu teria um controller dentro do outro.

Então, eu tenho algo semelhante a essa estrutura:

  <div ng-controller='PageController'>
    <h1 ng-bind="title"></h1>
    <ul>
        <li ng-repeat="url in urls"></li>
    </ul>
    <!-- aqui o angular vai executar outro controller, por causa do $routeProvider -->
    <div ng-view></div>
</div>

A minha dúvida é:

  • Isso foge dos padrões recomendados pelo AngularJS?

  • Isso pode ocasionar algum problema?

1
  • Qual é o problema com a pergunta? porque o negativo? poderia indicar para eu poder melhorar os detalhes? 7/08/2016 às 22:16

1 Resposta 1

4

Isso não foge nada aos padrões do Angularjs, na própria documentação de Controllers há um exemplo com isso bem claro:

<div class="spicy">
  <div ng-controller="MainController">
    <p>Good {{timeOfDay}}, {{name}}!</p>

    <div ng-controller="ChildController">
      <p>Good {{timeOfDay}}, {{name}}!</p>

      <div ng-controller="GrandChildController">
        <p>Good {{timeOfDay}}, {{name}}!</p>
      </div>
    </div>
  </div>
</div>

Fonte: https://docs.angularjs.org/guide/controller#scope-inheritance-example

A isso se dá a denominação de Scope Inheritance ou Herança de Escopo.

Quanto aos problemas, o mais aparente que vejo é o conflito de semelhança entre variáveis, funções, etc. Mais o Angular faz com que a referência seja feita a hierarquia mais próxima. Por exemplo:

var app = angular.module("inheritanceExample", []);

app.controller("first", function($scope) {
  $scope.name = "João von Haller";
})
app.controller("second", function($scope) {
  $scope.name = "Maria Mangeth";
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="inheritanceExample" ng-controller="first">
  First Controller:
  <br> {{name}}
  <br>
  <hr>
  <div ng-controller="second">
    Second Controller:
    <br> {{name}}
  </div>
</div>

Aqui vão algumas referências quanto a utilização de controller separados em conjunto:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .