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，它仍然包含在div中，使用ng-contoller ='LoginController'并放在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上按下Logout按钮doLogout功能时一切正常。似乎控制器内的范围之间存在一些冲突。谢谢你的帮助。

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。

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

1 个答案: