Question

我需要根据使用ng-hide指令登录的用户将一些导航栏项设置为隐藏。当我将指令设置为在作用域函数之外定义的作用域变量时，它可以工作。但是当它在函数内部设置时却没有。以下是我的观看代码。有人可以建议我如何做到这一点。

//我的控制器代码

ub.controller('signupController',['$scope','$log','$http','authFact',function($scope,$log,$http,authFact){
    console.log('we are inside signup controller');

    $scope.fblogin =function(){
    FB.login(function(response){

        if (response.status === 'connected') {
          // Logged into your app and Facebook.
          $scope.testAPI();
        } else if (response.status === 'not_authorized') {
          // The person is logged into Facebook, but not your app.
          document.getElementById('status').innerHTML = 'Please log ' +
            'into this app.';
        } else {
          // The person is not logged into Facebook, so we're not sure if
          // they are logged into this app or not.
          document.getElementById('status').innerHTML = 'Please log ' +
            'into Facebook.';
        }
        $scope.fbresponse = response;
    });

    };

    $scope.testAPI =function() {
        FB.api('/me',{fields: 'first_name,last_name,gender,email,picture'}, function(response) {

            console.log('Successful login for: ' + response.first_name);
            console.log('email:' + (response.email));
            document.getElementById('status').innerHTML =
            'Thanks for logging in, ' + response.first_name + '!';
            document.getElementById('profpic').innerHTML =
            "<img src='" + response.picture.data.url + "'>";
        });
        $scope.accesstoken = FB.getAuthResponse().accessToken;

       //does not work when defined here
        $scope.test=true;
         };

    $scope.test=true;//works when its defined here

}]);

//My view
<div class="collapse navbar-collapse" id="navbar" ng-controller="signupController">
                <ul class="nav navbar-nav navbar-right">                 

                    <li ng-hide="test">
                        <a class="page-scroll" href="#/signup">Register/Login</a>
                    </li>
                     </ul>
            </div>

Answer 1

当在函数内定义$ scope变量时，只有在调用函数时，它才附加到$ scope（或初始化）。

在你的情况下，函数是$scope.testApi()，只有当你的response.status =从facebook的回复连接时才会被调用。

你应该做的是首先初始化函数外的$ scope.test = true或false的值，并在$ scope.testApi中更新它的值（）功能。像这样：

// Initialize the variable test outside the function
$scope.test=true;

$scope.testAPI =function() {
    FB.api('/me',{fields: 'first_name,last_name,gender,email,picture'}, function(response) {

        console.log('Successful login for: ' + response.first_name);
        console.log('email:' + (response.email));
        document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.first_name + '!';
        document.getElementById('profpic').innerHTML =
        "<img src='" + response.picture.data.url + "'>";
    });
    $scope.accesstoken = FB.getAuthResponse().accessToken;

   // Update the value
    $scope.test=true;
};

当在范围函数内设置范围变量时，angular指令ng-hide不起作用

1 个答案: