AngularJS: Как скрыть контроллер div, а затем показать другой контроллер div на том же месте?

Мое намерение состояло в том, чтобы скрыть первый контроллер div, когда пользователь вводит имя, и через две секунды отображает следующий контроллер.

Так у меня есть эти:AngularJS: Как скрыть контроллер div, а затем показать другой контроллер div на том же месте?

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); 
    }; 
});

Проблема заключается в том, что первый контроллер действительно исчезает, но второй контроллер не на всех ,

источник

2016-04-03 user298519

Я думаю, ваша проблема в том, что $scope.enteredName является свойством на контроллере nameCtrl, поэтому ваши директивы ng-hide/ng-show действительно относятся к совершенно другим переменным.

Возможно, вам нужен один контроллер как для формы, так и для индикатора выполнения, если вы переместили ng-controller="nameCtrl" в свою коробку div и удалили ng-controllers="progressBar", тогда я думаю, что все будет работать так, как ожидалось.

источник

2016-04-03 10:23:30

Конечно. Они не имеют той же области, где изменена переменная enteredname.

Оберните весь контент с помощью nameCtrl| контроллера.

источник

2016-04-03 10:29:59

$ rootScope, может помочь вам контролировать & долю всех атрибутов родителя.

ПРИМЕЧАНИЕ. Работает при загрузке маршрутизации.

 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>

источник

2016-04-03 10:48:26 Maher

AngularJS: Как скрыть контроллер div, а затем показать другой контроллер div на том же месте?

ответ

Смежные вопросы