javascript - AngularJS:如何隐藏一个 Controller div，然后在同一位置显示另一个 Controller div？

Question

我的意图是在用户输入名称时隐藏第一个 Controller div，并在两秒后显示下一个 Controller 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);
    };
});

问题是第一个 Controller 确实消失了，但第二个 Controller 根本没有出现。

Answer 1

我认为你的问题是 $scope.enteredName 是 nameCtrl Controller 上的一个属性，所以你的 ng-hide/ng-show 指令实际上引用了完全不同的变量。

如果您将 ng-controller="nameCtrl" 移动到您的框 div 并删除 ng-controllers="，您可能需要一个用于表单和进度条的 Controller progressBar"那么我认为事情会按预期进行。