2

Bom galera eu estou começando a estudar angularjs, e na minha aplicação eu queria fazer algo parecido com o seguinte.

Tenho um menu dropdown e também tenho umas tabs que eu criei manualmente. Ao clicar em um item do menu eu queria fazer com que essa tab recebesse a view porem eu não estou conseguindo.O máximo que eu fiz foi ao clicar na aba mudar o conteúdo correspondente usando as rotas.

segue a baixo o código que eu já fiz só do html supondo que eu tenho uma parte de rotas já pronta.

<div class="btn-group">
    <button type="button" class="btn btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#create">Action</a></li>
        <li><a href="#list">Another action</a></li>
        <li><a href="#list">Something else here</a></li>
    </ul>
</div>
<div class="container" ng-init="tab=1">
    <ul class="tabs-nav">
        <li><a ng-click="tab=1" href="#edit" ng-class="{'active' : tab==1}">Aba 1</a></li>
        <li><a ng-click="tab=2" href="#list" ng-class="{'active' : tab==2}">Aba 2</a></li>
        <li><a ng-click="tab=3" href="#create" ng-class="{'active' : tab==3}">Aba 2</a></li>
    </ul>
    <div class="tabs-container">
        <div class="tab-content" ng-show="tab == 1">
            <div ui-view="main"></div>
        </div>
        <div class="tab-content" ng-show="tab == 2">
            <div ui-view="main"></div>
        </div>
        <div class="tab-content" ng-show="tab == 3">
            <div ui-view="main"></div>
        </div>
    </div>
</div>

É um exemplo básico mais o que eu estou fazendo é o seguinte, tenho umas abas e nessas abas quando eu clico nelas ela carregam o conteúdo até ai ok. Porem o que eu queria é ao clicar no link do menu uma das abas recebesse a view que eu configuraria. Como citei anteriormente eu estou utilizando as rotas para mudar clicando nas abas so queria fazer pelo menu não estou conseguindo linkar o menu com as abas. Se alguém tiver uma solução para isso agradeço.

11
  • Qual sistema de rota você está utilizando? 17/11/2015 às 12:44
  • Estou usando o ui-router app.config(function ($stateProvider, $urlRouterProvider) ai tem os seguintes "states", list create e edit com os controllers e views correspondentes. 17/11/2015 às 13:02
  • Você não pode colocar o template direto no html? ou um ng-include? 17/11/2015 às 13:06
  • Já tentou isso? /#edit, /#create, /#list 17/11/2015 às 13:11
  • @CelsomTrindade foi o que eu pensei porem essa a questão não estou conseguindo referenciar o botão do menu com a aba.Ao clicar no item do menu la na minha aba 1 por exemplo a view ser chamada. IvanFerrer é exatamente isso que estou fazendo hoje, porem isso que estou fazendo é nas abas ao clicar na propria aba abre a rota /#edit e etc. Queria clicar no menu e em uma das abas aparecer a view de um formulario. A questão é como vincular o item do menu a uma aba. 17/11/2015 às 13:13

2 Respostas 2

1

A solução usando o router, poderia ser da seguinte maneira:

.state('tab', {
    abstract: true, //não permite acessar diretamente esse view, deve ser um child
    views: {
        "tab": {
            controller: 'MeuCtrl',
            templateUrl: "seu/caminho/arquivo.html"
        }
    }
})
    .state('edit', {
        parent: 'tab',
        url: '/Tab1',
        views: {
            'main': {
                templateUrl: templateUrl: "seu/caminho/edit.html"
            }
        }
    })
    .state('list', {
        parent: 'tab',
        url: '/Tab1',
        views: {
            'main': {
                templateUrl: templateUrl: "seu/caminho/list.html"
            }
        }
    })
    .state('create', {
        parent: 'tab',
        url: '/Tab1',
        views: {
            'main': {
                templateUrl: templateUrl: "seu/caminho/create.html"
            }
        }
    })

E no seu html:

<ul class="tabs-nav">
    <li><a ng-click="tab=1" ui-sref="edit" ng-class="{'active' : tab==1}">Aba 1</a></li>
    <li><a ng-click="tab=2" ui-sref="list" ng-class="{'active' : tab==2}">Aba 2</a></li>
    <li><a ng-click="tab=3" ui-sref="create" ng-class="{'active' : tab==3}">Aba 2</a></li>
</ul>

Repare que o state tab tem o abstract true, ou seja, ele nunca pode ser acessado diretamente, você deve acessar um dos "state child".

Ps.: a view tab seria para conter todo o html que está na sua questão. Ou se você já usa a view main para isso, apenas crie uma view secundária para usar só para as tabs. Se fizer isso, não se esqueça de mudar no view dos childs na rota também.


Se você deseja usar diretamente no html, sem o route, também é possível, basta usar o li sem a propriedade href, e adicione um ng-include direto no template. Repare que ele precisa ter aspas duplas e simples.

<div class="tabs-container">
    <div class="tab-content" ng-show="tab == 1">
        <div ng-include="'seu/caminho/arquivo1.html'"></div>
    </div>
    <div class="tab-content" ng-show="tab == 2">
        <div ng-include="'seu/caminho/arquivo2.html'"></div>
    </div>
    <div class="tab-content" ng-show="tab == 3">
        <div ng-include="'seu/caminho/arquivo3.html'"></div>
    </div>
</div>

Alternativa para o ng-include:

<ng-include src="'seu/caminho/arquivo3.html'"></ng-include>
5
  • muito bom entendi perfeitamente. Porem queria saber so mais uma coisa eu tenho um Botão com um menu dropdown e cada item desse menu é referente a uma aba como eu faço para vincular esse item do menu a essa aba? Exemplo: Um dos itens do menu é o item create ao clicar no item create no menu la na aba 1 por exemplo aparecer a view. Agora ja entendi essa parte do ng-include e do ui-router agora so queria vincular o meu menu dropdown com as tabs. 17/11/2015 às 13:28
  • Se você está usando o router, basta por o ui-sref lá também, se não, basta por o ng-click="tab = X" nesse menu. Se entendi bem sua dúvida, seria isso :) 17/11/2015 às 13:31
  • isso mesmo vou testar e logo logo coloco a resposta. Estou no trabalho porem muito obrigado pela ajuda. Logo mais darei retorno. 17/11/2015 às 13:36
  • Ok. Fico no aguardo. 17/11/2015 às 14:18
  • 1
    Muito obrigado pelas informações me foi muito util, estou vendo se consigo fazer algumas coisinhas a mais com isso caso tenho alguma duvida volto a perguntar. Muito grato pela resposta me serviu bastante. 17/11/2015 às 18:10
1

Faça mais ou menos assim e veja se resolve:

var angularApp = angular.module('MyApp', ['ui.bootstrap', 'ngSanitize', 'ngRoute']);

var url = window.location.href;
var levels = url.split('/');

if (levels[4] == 'edit' || levels[4] == 'list' || levels[4] == 'create') {
    angularApp.config([
                         '$routeProvider',
                         function ($routeProvider) {
                            $routeProvider
                            .when("/", {templateUrl: "/template/sua_template1.html",acao_1:" active"})
                            .when("/home", {templateUrl: "/template/sua_template2.html",acao_2:" active"})
                            .otherwise({redirectTo: '/home/'});
                         }
                     ]);

}

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 .