CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Boltosaurus
Boltosaurus

Reputation: 2216

ng-switch is not working in some cases

I'm building some login module with angularjs.

Here is the code: I have main page 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>

I'm appending Login.html file when pressing on Log In button. This is the html, it is still included in div with ng-contoller='LoginController' and placed in 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>

Here is the 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 {

            }
        });

    }
});

The problem is that I'm changing $scope.model.loggedIn after pressing login button (doLogin function in app.js) and I'm expecting to ng-switch on model.loggedIn to be switched, but it's not. When pressing Logout button doLogout function on app.js everything works fine. It seems that there is some conflict between the scopes inside the controller. Thanks for the assistance.

Upvotes: 0

Views: 90

Answers (1)

a better oliver
a better oliver

Reputation: 26848

You have two instances of LoginController, each with its own scope. One is here

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

the other one here

<div ng-view></div>

because of

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

eventHandler.doLogin() is called in the scope of second one and it doesn't affect model.loggedIn from the scope of the first one.

Upvotes: 1

Related Questions