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

Asked

Viewed 68 times

2

At the angle I created an abstract route using $stateProvider.

This route is where you have the side navigation menu and two Toolbar, one with a few buttons, and the other 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’m not finding the means to dynamically manipulate the components added in the abstract route.

My main route is written that way:

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

The rest are more or less 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 of retrieving the elements on the secondary routes this way:

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

It is possible to manipulate on the routes secondary to Toolbar and the abstract route input?

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

If it’s not possible or it’s bad practice, what alternatives do I have to it?

javascript angularjs angular-material
  • 1

    I advise you not to put your toolbars and sidemenu on a route, even if abstract. If these elements are always present, then you should treat them like a shell and inside them is your ui-view. Mainly because when you need an abstract route, you will not be able to reach and manipulate this new abstract route, since you are doing so with your "shell elements".

  • So, in the abstract route template I use, just a <ui-view> to inject the content of other routes

  • So you have in your index.html a ui-view that loads the abstract route that has its element and another ui-view to load the daughter routes of the abstract, right? The point of what I said is just that you don’t have this route pavê, just have index.html with a ui-view and Toolbar type components. So even before your route system is loaded you can already display a skeleton, in addition to reducing a layer of unnecessary route keeping your standard Toolbar and sidebar skeleton.

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, integrate it into the controllers and refer it to your local scope:

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

From there you can use it in view, which will be updated (via two-way Binding) whenever the value is changed:

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

Source.

Browser other questions tagged javascript angularjs angular-material

You are not signed in. Login or sign up in order to post.