CODEWITHSUNDEEP
angularjsangular-ui-router
Max
Max

Reputation: 11

angular js ui-Router : Child view overwrites views already displayed in parent

With reference to the below mentioned state structure :

 parent
   |->leftTree
   |->rightTree

In my Parent state template i have 2 ui-views .

leftTree is config to display its content in ui-view="h1" and rightTree in ui-view="h2"

<div ui-view = "h1"></div>
<div ui-view = "h2"></div>

and 2 Buttons

<button type="button" ui-sref="lefttree()" class="btn btn-default">left</button>
<button type="button" ui-sref="righttree()" class="btn btn-default">Right</button>

When i click on button left -> the "leftTree" template is displayed under ui-view = "h1"

But when i click on button right -> the "rightTree" template is displayed under ui-view = "h2" but the information in ui-view = "h1" is deleted (i mean ui-view= "h1" is completely empty).

Is this the expected behaviour . How can i preserve the information in ui-view = "h1"

Please find the code below :

let a = angular.module("app", ["ui.router"]);
a.config(["$stateProvider", "$urlRouterProvider", function(statepro, urlPro) {

  statepro.state("parent" , {
    url:"/parent",
    template : `<div class="btn-group" role="group" aria-label="...">
                  <button type="button" ui-sref="parent.lefttree()" class="btn btn-default">left</button>
                  <button type="button" ui-sref="parent.righttree()" class="btn btn-default">Right</button>
                </div>
                <div ui-view = "h1"></div>
                <div ui-view = "h2"></div>`,
    controller : function(){
      console.log("creating parent");
    }
  });

  statepro.state("parent.lefttree" , {
    url:"/lefttree",
    views : {
      "h1" : {
        template : `<div class="panel panel-default" style = "width : 30%">
                      <div class="panel-heading">Left Tree</div>
                        <div class="panel-body">
                          left tree
                        </div>
                      </div>
                      </div>`,
        controller : function(){
                        console.log("created left tree");
                      }
      }
    }

  });

  statepro.state("parent.righttree" , {
    url:"/righttree",
    views : {
      "h2" : {
        template : `<div class="panel panel-default" style = "width : 30%">
                      <div class="panel-heading">Right tree</div>
                        <div class="panel-body">
                          right tree
                        </div>
                      </div>
                      </div>`,
        controller : function(){
                        console.log("created right tree");
                      }
      }
    }

  });

urlPro.otherwise("/parent");

}]);

thanks

Upvotes: 0

Views: 62

Answers (1)

Joe Hawkins
Joe Hawkins

Reputation: 9971

I think you're misunderstanding named views. Only one state can be activated at a time. If you want to accomplish this through states you would need to have parent, parent.lefttree, parent.righttree, and an additional state to show both (i.e. parent.bothtrees).

This fiddle contains an example of this solution. Notice the duplication in state parent.bothTrees

Upvotes: 0

Related Questions