2

No angular eu criei uma rota abstrata usando $stateProvider.

Essa rota é onde tem o menu de navegação lateral e duas toolbar, uma com alguns botões, e uma outra de pesquisa.

Eu criei uma rota abstrata com a ideia de reaproveitar algumas partes da tela. pois todas as rotas irão seguir um padrão.

Porém não estou conseguindo encontrar meios para manipular de forma dinâmica os componentes adicionados na rota abstrata.

A minha rota principal está escrito dessa forma:

$stateProvider
        .state('home', {
            abstract: true,
            url: '',
            templateUrl: 'templates/home.html',
            controller: 'HomeCtrl',
            controllerAs: 'home'
        })

As demais estão mais ou menos assim:

.state('home.rota2', {
            url: '/rota2',
            templateUrl: 'templates/rota2.html',
            controller: 'Rota2Ctrl',
            controllerAs: 'rota2'
        })

A parte do template principal que desejo manipular nas demais rotas são essas com '??':

<div layout="column" class="relative" layout-fill role="main">

    <md-toolbar id="toolbar-dashboard" ng-show="??">
        <div class="md-toolbar-tools">

            <h3>Dashboard</h3>

        </div>
    </md-toolbar>

    <md-toolbar id="toolbar-search" ng-show="??">

        <div class="md-toolbar-tools">

            <!-- Pesquisar -->
            <md-input-container md-no-float flex>
                <input type="text" id="search-text" aria-label="Pesquisar" class="md-body-1" placeholder="Pesquisar .." ng-model="??" ng-change="??">
            </md-input-container>

            <md-button class="md-icon-button md-primary">
                <ng-md-icon icon="search"></ng-md-icon>
            </md-button>

        </div>

    </md-toolbar>


    <!-- Content -->
    <md-content flex md-scroll-y>
        <ui-view></ui-view>
    </md-content>

</div>

Basicamente, preciso controlar a visibilidade de uma outra toolbar com o ng-show, ng-click e/ou ng-change para pesquisar.

Eu pensei em recuperar os elementos nas rotas secundárias desta forma:

var search_text = angular.element(document.querySelector('search-text').val()); //undefined.

É possível manipular nas rotas secundárias a toolbar e o input da rota abstrata?

Se for possível, como utilizar essas três funcionalidades citadas: ng-show, ng-change e ng-click?

Se não for possível ou é uma má prática, quais alternativas tenho a isso?

3
  • 1
    Eu te aconselho a não colocar as suas toolbars e sidemenu em uma rota, mesmo que abstrata. Se esses elementos estão sempre presentes, então você deve tratar eles como uma casca e dentro deles fica o seu ui-view. Principalmente por que quando você precisar de uma rota abstrata, você não vai conseguir atingir e manipular essa nova rota abstrata, uma vez que você esta fazendo isso com os seus "elementos de casca".
    – MarioAleo
    Commented 15/12/2016 às 12:58
  • Entao, no template da rota abstrata eu utilizo, justamente um <ui-view> para injeção do conteúdo das demais rotas
    – Geferson
    Commented 15/12/2016 às 13:02
  • Então você tem no seu index.html um ui-view que carrega a rota abstrata que possui os seus elemento e um outro ui-view para carregar as rotas filhas da abstrata, certo? O ponto do que eu falei é justamente você não ter esse pavê de rotas, ter apenas o index.html com um ui-view e os componentes do tipo toolbar. Assim, mesmo antes do seu sistema de rota ser carregado você já consegue exibir um esqueleto, além de reduzir uma camada de rota desnecessária mantendo o seu esqueleto padrão de toolbar e sidebar.
    – MarioAleo
    Commented 15/12/2016 às 17:23

1 Resposta 1

4

Utilize um serviço para compartilhar valores entre controllers. Exemplo:

angular.module('minhaApp', [])
    .service('valoresCompartilhadosService', function () {
        this.valorCompartilhado = '';
        return this;
    });

Com este serviço disponível, injete-o nos controllers e referencie-o no seu escopo local:

.controller('HomeCtrl', function($scope, valoresCompartilhadosService){
  $scope.vc = valoresCompartilhadosService;
});

A partir daí você pode utilizá-lo na view, que será atualizada (via two-way binding) sempre que o valor for alterado:

<md-toolbar id="toolbar-search" ng-show="vc.valorCompartilhado">

Fonte.

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 .