Nested views dynamic change

ionic-v1
1

Hello everyone!

Im trying to change my nested right side view with the header bar buttons.

How you guys think i could acomplish that?

Here’s my States config:

angular.module('starter', ['ionic', 'ngTouch', 'ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/side-menu.html",
      controller: 'Main'
    })
    .state('app.main', {
      url: "/main-screen",
      views: {
        'menuContent' :{
          templateUrl: "templates/main-screen.html",
          controller:  "GridController"
        },
        'grid_right@app.main' :{
          templateUrl: "templates/partials/products-grid.html",
          controller:  "GridController"
        },
        'grid_left@app.main' :{
          templateUrl: "templates/partials/receipt.html"
        },
        'teste@app.main' :{
          templateUrl: "templates/partials/teste.html"
        }
      }
    });
    
  $urlRouterProvider.otherwise('/app/main-screen');
  })

My main-screen.html

<div class="bar bar-header bar-dark">
<h1 class="title">bar-dark</h1>
            <button ng-click="options('grid_right');">Grid</button>
            <button ng-click="options('teste');">Teste</button>
</div>
<ion-content class="has-header" ng-controller="Main" scroll="false">
    <div id="grid" class="left-side" style="border-right: 1px solid #DFE1E1; background-color:white; height:200px;" ui-view="grid_left"></div>
    <div class="container main-grid right-side" ui-view="grid_right"></div>
</ion-content>

Does someone has an ideia on how i could do it?

Thanks alot!

2

you dont need them nested like that. You can run a header directive in the same view as your content that why you are using the same controller; which will make your life much easier than having to use $rootScope all the time.

1 Like
3

Hello.

Thanks for your reply.

I don’t understand your answer.

What i’m trying to do is have a main html file were i put my partials together and on my main html i want to be able to click a button and change a partial with other partial without going to a new page. Only the partial selected will update.

Do you understand my need?

4

I understand your need but what I am saying is you dont need to structure it that way. You can place your partials in teh view of the child controller and it will still look like its a master page but you wont have to work with parent scopes anymore.

5

Is there a chance to see an example?

It would be wonderfull :smiley:

And thanks for you help!