Question

我正在使用Auth0，它允许我在登录完成后检索用户个人资料信息，如下所示：

<span>Name is {{auth.profile.nickname}}</span>

// UserInfoCtrl.js
function UserInfoCtrl($scope, auth) {
  $scope.auth = auth;
}

我想要做的是使用ng-show和ng-hide仅在用户登录后显示内容。其他人如何实现这一目标？我在我的UserInfoCtrl.js中设想类似于条件语句的东西，例如：

if($scope.auth !== null) {
  $scope.loggedin
}

更新：根据关于falselys的评论以及$ scope.auth提供了一些值，也许最好将某些东西绑定到Login控制器。有什么想法吗？

// Login and logout functionality
pfcControllers.controller('loginCtrl', ['$scope', 'auth', '$location', 'store', function ($scope, auth, $location, store) {
$scope.login = function () {
    auth.signin({}, function (profile, token) {
        store.set('profile', profile);
        store.set('token', token);
        $location.path("/");
    }, function (error) {
        console.log("There was an error logging in", error);
    });
}

$scope.logout = function () {
    auth.signout();
    store.remove('profile');
    store.remove('token');
    $location.path('/login');
}
}]);

Answer 1

如果$scope.auth仅在用户登录时才有值，则可以执行以下操作：

<span ng-show="auth">Name is {{auth.profile.nickname}}</span>

这样，只有在span被定义的情况下，您才会看到auth。

Answer 2

出于安全考虑，我认为您的服务器只应在用户登录时发送已记录区域的内容。

但是，如果出于某种原因，您希望对记录区域进行此控制，则可以选择其他方法：

使用ng-show =＆＃34; auth＆＃34;在你的元素上。它将显示或隐藏元素，根据＆＃39; auth＆＃39;值。该元素永远不会从DOM中删除，框架只需添加或删除一个css类;
使用ng-if =＆＃34; auth＆＃34;在你的元素上。它将根据auth值添加或删除元素。如果auth评估为false，则完全删除该元素;

ng-show和ng-if都接收表达式，引用为here。

尝试做：

在您的控制器方法上创建：$ scope.loggedin = false;
更新$ scope.loggedin值可以更改的位置;
在html上使用ng-show =＆＃34; loggedin＆＃34;或ng-if =＆＃34; loggedin＆＃34;;
如果未从angular（events ...）调用更改登录值的函数，请尝试执行$ scope。$ apply（function（）{....}）。请参阅here

Answer 3

最简单的方法是将它放在您的视图代码中：

<div ng-show='auth'></div>

现在，这不是最好的做法，我建议你使用令牌，here是关于角度的令牌发布

请注意：这不是一个有效的JS语法：

  if($scope.auth is not null {
     $scope.loggedin
  }

改为使用：

  if($scope.auth != null) {
    $scope.loggedin
 }

angularjs ng-show / ng-hide在用户登录后显示内容

3 个答案: