Is it possible to manipulate a template from an abstract route, in other routes, dynamically?

Navigation
2

At angular I created an abstract route using $ stateProvider.

This route is where you have the side navigation menu and two toolbar, one with some buttons, and another one of search.

I created an abstract route with the idea of reusing some parts of the screen. because all routes will follow a pattern.

But I can not find ways to dynamically manipulate the components added in the abstract route.

My main route is written this way: 

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

The rest look something like this: 

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

The part of the main template that I want to manipulate in the other routes are those with '??': 

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

Basically, I need to control the visibility of another toolbar with ng-show, ng-click and / or ng-change to search.

I thought about retrieving the elements on the secondary routes this way: 

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

Is it possible to manipulate in the secondary routes the toolbar and the input of the abstract route?

     

If it is possible, how to use these three features: ng-show, ng-change, and ng-click?

     

If it is not possible or bad practice, what alternatives do I have to this?

    
asked by anonymous 15.12.2016 / 11:37

1 answer

4

Use a service to share values between controllers . Example: 

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

With this service available, inject it into your controllers and refer to it in your local scope: 

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

From here you can use it in view , which will be updated (via two-way binding ) whenever the value changes: 

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

Source.

    
15.12.2016 / 15:38
horizontal alignment with css MySQL query with PDO does not return data