Question

AngularJS应用程序有一个名为authenticated2的变量，需要在html视图中访问。但是该值不会在屏幕上打印出来。

可以对下面的代码进行哪些具体更改，以确保在屏幕上打印出authenticated2的值？

以下是相关的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>

按照原样，加载上面的html视图时不打印任何内容。但是控制器连接到视图，因为视图中的其他对象是基于控制器中的其他变量加载的。

以下是security.js控制器中的相关内容：

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
    }

});

以下是来自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;
}]);

Answer 1

由于authenticated2是一个函数，你必须调用它：

{{ authenticated2() }}

但似乎您可以将auth（或部分内容）放在$scope并直接使用它。例如在您的控制器中：

$scope.auth = auth;

并在您的HTML中：

{{ auth.authenticated2 }}

auth.authenticated2（不是函数）和$scope.authenticated2（函数）有点令人困惑。

Answer 2

由于它是关于在范围内获取auth变量，我建议你在某些init中设置变量auth。

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
    }

});

在HTML中，它与以下内容保持一致：

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

为什么这些变量不在html视图中打印？

2 个答案: