CODEWITHSUNDEEP
javascriptangularjs
CodeMed
CodeMed

Reputation: 9191

Why aren't these variables printing in html view?

An AngularJS app has a variable called authenticated2 that needs to be accessible in an html view. But the value is not printing out in the screen.

What specific changes can be made to the code below to make sure that the value of authenticated2 is printed out on the screen?

Here is the relevant html: 

auth.authenticated2 is: {{ auth.authenticated2 }} <br>
authenticated2 is {{ authenticated2 }} <br>
$scope.authenticated2 is {{ $scope.authenticated2 }} <br>
<div ng-show="auth.authenticated2=='yes'">
    <h1>Show some stuff.</h1>
</div>

As it stands, nothing is printed out when the above html view is loaded. But the controller is hooked up to the view because other objects in the view are loaded based on other variables in the controller.

Here is the relevant stuff in the security.js controller: 

angular.module('secure', ['auth']).controller('secure', function($scope, $http, $sce, auth) {

    $scope.authenticated1 = function() {
        if(auth.authenticated1=='yes'){return true;}
        else{return false;}
    }

    $scope.authenticated2 = function() {
        if(auth.authenticated2=='yes'){return true;}
        else{return false;}
    }

    //bunch of unrelated stuff

    $scope.$on('$viewContentLoaded', function() {
        //bunch of unrelated stuff
    }

});

And here is the relevant stuff from auth.js: 

angular.module('auth', ['ngCookies']).factory('auth', ['$rootScope', '$http', '$location', '$cookies', function($rootScope, $http, $location, $cookies){
    var auth = {

        authenticated1 : $cookies['AUTH1'],
        authenticated2 : $cookies['AUTH2'],

        //bunch of unrelated stuff  

        init : function(homePath, loginPath, logoutPath) {
            //bunch of unrelated stuff
        }
    };
    return auth;
}]);

Upvotes: 0

Views: 61

Answers (2)

Mani
Mani

Reputation: 1374

Since it is about getting auth variable in scope, I can suggest you to set the variable auth in some init.

angular.module('secure', ['auth']).controller('secure', 
function($scope, $http, $sce, auth) {

    init();

    function(){
        //It is good to have an init method if you have some sigin activies
        //before setting every variable else where

        $scope.auth ={};

        auth.getLoginInfo().then(function(res){
            var auth = {};
            auth.authenticated2 = res.authenticated2;
            $scope.auth = auth;
        });
    }

    $scope.authenticated1 = function() {
        if(auth.authenticated1=='yes'){return true;}
        else{return false;}
    }

    $scope.authenticated2 = function() {
        if(auth.authenticated2=='yes'){return true;}
        else{return false;}
    }

    //bunch of unrelated stuff

    $scope.$on('$viewContentLoaded', function() {
        //bunch of unrelated stuff
    }

});

In your HTML it remains same as:

auth.authenticated2 is: {{ auth.authenticated2 }} <br>
authenticated2 is {{ authenticated2() }} <br>
<div ng-show="auth.authenticated2=='yes'">
 <h1>Show some stuff.</h1> 
</div>

Upvotes: 1

pherris
pherris

Reputation: 17713

Since authenticated2 is a function, you'd have to invoke it:

{{ authenticated2() }}

but it seems like you could get away with putting auth (or parts of it) on $scope and using it directly. e.g in your controller:

$scope.auth = auth;

and in your HTML:

{{ auth.authenticated2 }}

It's a bit confusing with auth.authenticated2 (not a function) and $scope.authenticated2 (function).

Upvotes: 3

Related Questions