How to do for when click on an item from a menu to receive the corresponding view tab in Angularjs?

Question

Good guys I’m starting to study Angularjs, and in my application I wanted to do something similar to the following.

I have a dropdown menu and I also have some tabs that I created manually. By clicking on a menu item I wanted to make this tab receive the view but I’m not getting it. The most I did was by clicking on the change the corresponding content using the routes.

follows down the code I’ve only made of html assuming I have a part of routes already ready.

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

It’s a basic example more what I’m doing is the following, I have a few tabs and in these tabs when I click on them they carry the content up to ai ok. However what I wanted is to click on the menu link one of the tabs received the view that I would configure. As I mentioned earlier I am using the routes to change by clicking on the tabs just wanted to do by the menu I am not able to link the menu with the tabs. If anyone has a solution for that thank you.

Answer 1

The solution using the router could be as follows:

.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"
            }
        }
    })

And in your 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>

Note that the state tab has the true Abstract, IE, it can never be accessed directly, you must access one of the "Child state".

Ps.: the view tab would be to contain all the html that is in your question. Or if you already use the view main to do this, just create a secondary view to use only for tabs. If you do, don’t forget to switch to the Childs view on the route as well.

---

If you want to use directly in html, without the route, it is also possible, just use li without the href property, and add a direct ng-include in the template. Note that it needs to have double and single quotes.

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

Alternative to ng-include:

<ng-include src="'seu/caminho/arquivo3.html'"></ng-include>

Answer 2

Do more or less like this and see if it resolves:

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/'});
                         }
                     ]);

}