AngularJS Controller Not Showing/Hiding Correctly

Question

I am trying to get content to disappear on button click and then show a new set of content on that button click. I cannot quite get this to work. I commented what each section is doing. The first section doesn't disappear on button click. The second section works as expected and does disappear on button click and the third section doesn't show up on button click. Helps is greatly appreciated and I look forward to learning from this!

I thought by adding a controller it would all function together.

HTML

<!-- THIS DOESN'T DISAPPEAR ON BUTTON CLICK -->
<div ng-controller="EventCtrl" ng-hide="eventComplete">
    <h2>Example that doesn't disappear on button click</h2>
</div>

<!-- THIS WILL DISAPPEAR ON BUTTON CLICK -->
<div ng-controller="EventCtrl" ng-hide="eventComplete"> 

    <div>
        <h2>Example</h2>
        <md-button ng-click="eventFinish();">Finish</md-button>
    </div>

    <!-- THIS DOESN'T SHOW ON BUTTON CLICK -->
    <div ng-controller="EventCtrl" ng-show="eventComplete">
        <h2>Complete!</h2>
    </div>
</div>

ANGULAR

.controller('EventCtrl', function($rootScope,$state,$scope,$timeout){
  var self = this;
  $scope.eventComplete = false;
  $scope.eventFinish=function(){
    console.log('eventFinish'); //This logs
    $scope.eventComplete = true;
  };
})

You should wrap all of your html in <div ng-controller="EventCtrl"></div> so you don't have to add ng-controller multiple times. — Daniel W.
– Daniel W., Commented Jul 31, 2017 at 15:34

Daniel W. · Accepted Answer · 2017-07-31 15:54:12Z

2

You wrapped the div you want to hide around the div you want to show. The following html should solve the issue:

<div ng-controller="EventCtrl">

    <div ng-hide="eventComplete">
        <h2>Example that doesn't disappear on button click</h2>
    </div>

    <div ng-hide="eventComplete"> 
        <div>
            <h2>Example</h2>
            <md-button ng-click="eventFinish();">Finish</md-button>
        </div>
    </div>

    <div ng-show="eventComplete">
        <h2>Complete!</h2>
    </div>
</div>

EDIT: Found an issue in controller as well. You're missing the closing } for eventFinish :

.controller('EventCtrl', function($rootScope,$state,$scope,$timeout){
    var self = this;
    $scope.eventComplete = false;
    $scope.eventFinish = function() {
        console.log('eventFinish');
        $scope.eventComplete = true;
    };
})

edited Jul 31, 2017 at 15:54

answered Jul 31, 2017 at 15:40

Daniel W.

5633 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user5854648 Over a year ago

This answer was perfect because it is well explained and provides a logical solution with my current setup. It also solved the multiple controller issue without rewriting my code in such a way I couldn't understand it at my current skill level. I appreciate the help!

Lars-Kristian Johansen · Accepted Answer · 2017-07-31 15:47:17Z

Try to avoid placing same controller inside each other. That will only lead to problems. Instead use Components.

But if you insist on using controllers you could solve it this way. (Code not tested)

HTML

<div ng-controller="EventCtrl"> 
    <div ng-if="showExample(1)">
        <h2>Example 1</h2>
        <md-button ng-click="onClickExample(2);">Finish</md-button>
    </div>

    <div ng-if="showExample(2)">>
        <h2>Example 2</h2>
        <md-button ng-click="onClickExample(1);">Finish</md-button>
    </div>
</div>

JS

.controller('EventCtrl', function($rootScope,$state,$scope,$timeout){

  $scope.currentExample=1;

  $scope.showExample = function(id){
    return $scope.currentExample === id;
  }

  $scope.onClickExample = function(id){
    $scope.currentExample = id;
  } 
});

Collectives™ on Stack Overflow

AngularJS Controller Not Showing/Hiding Correctly

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related