CODEWITHSUNDEEP
angularjsangular-ui-router
satya
satya

Reputation: 3560

Can not get the child views using angular.js

I have some nested controllers and I need to display the child views as per some conditions but could not get it. I am providing my code below.

parent.html:

<div>
  <h1>Welcome</h1>
  <div ng-show="show1">
    <div ng-include="'show1.html'"></div>
  </div>
  <div ng-show="show2">
    <div ng-include="'show2.html'"></div>
  </div>
</div>

here from the beginning show1.html is displaying to the user.

parentController.js:

var dept=angular.module('Spesh');
dept.controller('parentController',function($scope,$http,$state,$window){
    $scope.show1=true;
    $scope.show2=false;
});

inside show1.html code when user will click on the button the show2.html should display.

show1.html:

<div ng-controller="show1Controller">
  <h1>{{messg}}</h1>
  <button type="button" ng-click="getShow2();">show1</button>
</div>

show1Controller.js

var dept=angular.module('Spesh');
dept.controller('show1Controller',function($scope,$http,$state,$window){
    $scope.messg='Show1';
    $scope.getShow2=function(){
      $scope.parent.show1=false;
      $scope.parent.show1=true;
    }
});

But its not happening like that. Here I need when user will click on button the respective view should append inside the parent view. my full Plunkr code is here.

Upvotes: 0

Views: 31

Answers (2)

Hoyen
Hoyen

Reputation: 2519

You probably should try to use directives or components for this task. But if you must use your current structure you should have the parent controller implement a function that toggles the two templates. 

/* parentController.js */
var dept = angular.module('Spesh');
dept.controller('parentController', function($scope, $http, $state, $window) {
  $scope.show1 = true;
  $scope.show2 = false;
  $scope.toggleShow = function() {
    $scope.show1 = !$scope.show1;
    $scope.show2 = !$scope.show2;
  }
});

/* showController1.js */
var dept = angular.module('Spesh');
dept.controller('show1Controller', function($scope, $http, $state, $window) {
  $scope.messg = 'Show1';
  $scope.doToggle = function() {
    $scope.$parent.toggleShow();
  }
});

/* showController2.js */
var dept = angular.module('Spesh');
dept.controller('show2Controller', function($scope, $http, $state, $window) {
  $scope.messg = 'Show2';
  $scope.doToggle = function() {
    $scope.$parent.toggleShow();
  }
});


/* show1.html */
<div ng-controller="show1Controller">
  <h1>{{messg}}</h1>
  <button type="button" ng-click="doToggle();">Toggle</button>
</div>

/* show2.html */
<div ng-controller="show2Controller">
  <h1>{{messg}}</h1>
  <button type="button" ng-click="doToggle();">Toggle</button>
</div>

Upvotes: 0

james00794
james00794

Reputation: 1147

You need to go two levels up using the $parent. The ng-include creates a new scope under the parent, and the ng-controller within each template creates another scope. So when you are within the ng-controller in show1 and show2, the parent that you are looking for is two levels up.

Here is a plunker:

https://plnkr.co/edit/6GWJjf5KcE2Dr9sqQOep?p=preview

Upvotes: 1

Related Questions