AngularJS – Multiple ng-view no modelo único

Eu estou construindo um aplicativo web dynamic usando AngularJS. É possível ter vários ng-view em um único modelo?

Você pode ter apenas uma ng-view .

Você pode alterar seu conteúdo de várias maneiras: ng-include , ng-switch ou mapeamento de diferentes controladores e modelos por meio do routeProvider.

O UI-Router é um projeto que pode ajudar: https://github.com/angular-ui/ui-router Um de seus resources é Multiple Named Views

O UI-Router tem muitos resources e eu recomendo que você o use se estiver trabalhando em um aplicativo avançado.

Verifique a documentação de várias exibições nomeadas aqui .

Eu acredito que você pode realizá-lo apenas tendo uma ng-view única. No modelo principal, você pode ter seções ng-include para subvisualizações e, em seguida, no controlador principal, definir as propriedades do modelo para cada submodelo. Para que eles se liguem automaticamente às seções ng-include . Isto é o mesmo que ter múltiplos ng-view

Você pode verificar o exemplo dado na documentação do ng-include

no exemplo, quando você altera o modelo da lista suspensa, ele altera o conteúdo. Aqui, suponha que você tenha uma ng-view principal e, em vez de selecionar manualmente o conteúdo secundário, selecionando suspenso, você faz isso quando a visualização principal é carregada.

Usando o módulo ng-view regular, você não pode ter mais de um modelo dynamic.

No entanto, este projeto permite que você faça isso (procure por ui-router ).

É possível ter exibições múltiplas ou aninhadas. Mas não pela visão geral.

O módulo de roteamento principal em angular não suporta várias visualizações. Mas você pode usar o roteador da interface do usuário. Este é um módulo de terceiros que você pode obter através do Github, roteador angular-ui / ui, https://github.com/angular-ui/ui-router . Também está sendo desenvolvida uma nova versão do ngRouter (ngNewRouter) atualmente. Não é estável no momento. Então, eu forneço um exemplo simples de boot com o roteador ui. Ao usá-lo, você pode nomear visualizações e especificar quais modelos e controladores devem ser usados ​​para renderizá-los. Usando $ stateProvider, você deve especificar como os espaços reservados de visualização devem ser renderizados para um estado específico.

   home 
header
content
footer

Você precisa referenciar angularjs e angular-ui.router para essa amostra.

 $ bower install angular-ui-router 

Você não pode ter vários ng-view. Abaixo está o meu caso de uso em que resolvi minha exigência. Eu queria ter um comportamento com guias no diálogo do meu modelo. Eu estava enfrentando problema como clicar em guias com hiperlink que irá invocar links de roteador. Eu resolvi isso usando o botão e css para guias. Quando o usuário clica na guia, ele realmente não chamará nenhum hiperlink que sempre invocará o ng-roteador. Quando o usuário clica na aba, ele chama um método, onde eu carrego dinamicamente o html. Abaixo está a function no clique da guia

 self.submit = function(form) { $templateRequest('resources/items/employee/test_template.html').then(function(template){ var compiledeHTML = $compile(template)($scope); $("#d").replaceWith(compiledeHTML); }); 

Usuário $ templateRequest. Na página test_template.html adicione seu conteúdo html. Este conteúdo html será vinculado ao seu controlador.