javascript - ng-switch 在某些情况下不起作用

Question

我正在使用 angularjs 构建一些登录模块。

代码如下:我有主页 html:

<div id='main' ng-controller='LoginController'>
    <div class='yomate-header'>
        <div class='user-controls-area' >
            <div ng-switch on='model.loggedIn'>
                <div ng-switch-when="true" class='flex'>
                    <button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-plus"></span>Upload</button>
                    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-user"></span>Profile</button>
                    <button type="button" ng-click='eventHandler.doLogout($item,$event)' class="btn btn-default"><span class="glyphicon glyphicon-log-out"></span>Log Out</button>
                </div>
                <div ng-switch-when="false" class='flex' style='margin-right:20px'>
                    <div ng-controller='RoutingController'>
                        <button type="button" class="btn btn-default" ng-click='eventHandler.redirect("/login/")'><span class="glyphicon glyphicon-log-in">
                        </span>Log In</button>
                    </div>
                    <button type="button" class="btn btn-default" ng-click='eventHandler.doDummyLogin()'><span class="glyphicon glyphicon-plus-sign"></span>Sing Up</button>
                </div>

            </div>
        </div>

        <div>
            <div ng-view></div>
        </div>

    </div>
</div>

按下“登录”按钮时，我将附加 Login.html 文件。这是html，它仍然包含在带有ng-contoller='LoginController'的div中，并放置在ng-view div中:

<div class='login-box'>
    <h1 class='text-left'>Login</h1>
    <hr/>
    <label class='small-text-hint'>Login with your Email details:</label><br/>
    <label class='small-text-hint yomate-label'>Email</label></br/>
    <input type='text' class='data' id='login_input'/><br/>
    <label class='small-text-hint yomate-label'>Password</label></br/>
    <input type='password' class='data' id='login_password'/>
    <button type='button' ng-click='eventHandler.doLogin()' class="btn btn-primary">Login</button><a href='#' style='margin-left:10px'>Forgot password?<a>
    <a href='#' style='margin-left:10px'>Create Account</a>
    <hr/>
    <label class='small-text-hint'>Connect with social networks:</label><br/>
    <button type="button"  class="btn btn-primary btn-lg"><span class='fb-icon'><span>Facebook</span></span></button>
</div>

这是 app.js:

var app = angular.module("app",["ngRoute"]);

app.config(function($routeProvider){
    $routeProvider.when("/login/",
    {
        templateUrl:"/static/views/login.html",
        controller:"LoginController"
    })

    .when("/registration/", {
        templateUrl:"/views/registration.html",
        controller:"NewProfileCOntroller"
    })
});


app.controller("LoginController", function($scope,$http, $location){

    $http.post("/api/login/is_logged_in").success(function(data) {
        $scope.model = {
            loggedIn:data.logged_in,
            username:data.user_data!=null?data.user_data.username:"",
            img:data.user_data!=null?data.user_data.img:""
        }
    });

    $scope.eventHandler = new Object();
    $scope.eventHandler.doLogout = function(el,ev){
        $http.post("/api/login/log_out").success(function(data){
            $scope.model = {
                loggedIn:false,
                username:null,
                img:null
            }
        });
    }

    $scope.eventHandler.redirect = function(target){
        $location.path(target);
    }

    $scope.eventHandler.doLogin  = function(el,ev){
        $http.post("api/login/is_logged_in", {username:$("#login_input").val(), password : $("#login_password").val()}).success(function(data){
            if (data.logged_in==true){
                $scope.model = {
                    loggedIn:true,
                    username: null
                }
            } else {

            }
        });

    }
});

问题是我在按下登录按钮(app.js 中的 doLogin 函数)后更改 $scope.model.loggedIn 并且我期望 ng-switch on model.loggedIn 进行切换，但事实并非如此。当按下 app.js 上的注销按钮 doLogout 函数时，一切正常。 Controller 内部的范围之间似乎存在一些冲突。感谢您的帮助。

Answer 1

您有两个 LoginController 实例，每个实例都有自己的作用域。一个在这里

<div id='main' ng-controller='LoginController'>

这里还有一个

<div ng-view></div>

因为

$routeProvider.when("/login/",
{
    templateUrl:"/static/views/login.html",
    controller:"LoginController"

eventHandler.doLogin() 在第二个范围内调用，并且不会影响第一个范围内的 model.loggedIn。