CODEWITHSUNDEEP
javascriptangularjs
user298519
user298519

Reputation: 1190

AngularJS: How to hide a controller div, and then show another controller div on the same spot?

My intention was to hide the first controller div when the user inputs a name, and after two seconds, show the next controller div.

So I have these:

HTML:

<div class="box">

<div ng-controller="nameCtrl" ng-hide="enteredName">
 //form stuff here
</div>

<div ng-controller="progressBar" ng-show="enteredName">
    <h1>Test your strength</h1>
    <progressbar class="progress-striped active" animate="true" max="100" value="progressValue" type="success"><i><span count-to="{{countTo}}" duration="1" count-from="{{countFrom}}"></span> / 100</i></progressbar>
    </div>

</div>

JS: 

app.controller('nameCtrl', function($scope, $timeout) {

$scope.enteredName = false;

$scope.takeName = function(name) {
    $scope.playerName = name;
    console.log($scope.playerName);
    $timeout(function(){$scope.enteredName = true}, 2000);
    };
});

The problem is that the first controller does disappear, but the second controller doesn't appear at all.

Upvotes: 2

Views: 3216

Answers (3)

Maher
Maher

Reputation: 2547

$rootScope, could help you to control & share all parent attributes.

NOTE: worked when your routing is loaded.

     var app = angular.module("app", []);
        app.controller("ctrl", function ($scope, $rootScope, $timeout) {
            $rootScope.enteredName = false;
            $rootScope.playerName = null;
        });

        app.controller("ctrl1", function ($scope, $rootScope, $timeout) {
            $scope.name = "controller 1";

            $scope.takeName = function (name) {
                $rootScope.proggress = "wait please...";
                $timeout(function () {
                    $rootScope.playerName = name;
                    $rootScope.enteredName = true;
                }, 2000);
            };
        });

        app.controller("ctrl2", function ($scope, $rootScope) {
            $scope.name = "controller 2";

            $scope.again = function() {
                $rootScope.enteredName = false;
                $rootScope.proggress = null;
            }
        });
<!doctype html>
<html ng-app="app" ng-controller="ctrl">
<head>
    <title></title>
</head>
<body>
    <div ng-controller="ctrl1" ng-hide="enteredName">
        <h1>{{name}}</h1>

        <input ng-model="playerName" ng-blur="takeName(playerName)" />

        <div>{{proggress}}</div>
    </div>

    <div ng-controller="ctrl2" ng-show="enteredName">
        <h1>{{name}}</h1>

        player name: {{playerName}}

        <button ng-click="again()">again</button>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>

Upvotes: 1

Hellon Canella Machado
Hellon Canella Machado

Reputation: 456

Of course. They don't share the same scope where the variable enteredname is altered.

Wrap all content with nameCtrl| controller.

Upvotes: 0

James McCalden
James McCalden

Reputation: 3886

I think your problem is that $scope.enteredName is a property on the nameCtrl controller, so your ng-hide/ng-show directives actually refer to completely different variables.

You probably want a single controller for both the form and the progress bar, if you moved the ng-controller="nameCtrl" to your box div and remove ng-controllers="progressBar"then I think things would work as expected.

Upvotes: 3

Related Questions