Question

我的目的是在用户输入名称时隐藏第一个控制器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);
    };
});

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

Answer 1

我认为您的问题是$scope.enteredName是nameCtrl控制器上的属性，因此您的ng-hide / ng-show指令实际上是指完全不同的变量。

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

Answer 2

$ rootScope ，可以帮助您控制＆amp;共享所有父属性。

注意：加载路由时有效。

     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>

Answer 3

当然。它们不会在变量enteredname被改变的情况下共享相同的范围。

用nameCtrl|控制器包裹所有内容。

AngularJS：如何隐藏控制器div，然后在同一位置显示另一个控制器div？

3 个答案: