Question

我试图在登录时隐藏我的布局页面，我将ng-show设置为布尔值，当成功登录时设置为true。无论我做什么，布局页面都不会显示自己。我按照Angular ng-show directive doesn't work for button的回答，但我仍然没有得到要显示的页面。当我查看开发工具时，我可以看到我的自定义样式正在应用

Html代码：

<div class="my-hidden-xs container" ng-show="isLoggedIn">

CSS：

.my-hidden-xs {
    display: none !important;
}

控制器：

function LogInController($scope, $http, $state) {
    $scope.isLoggedIn = false;     
    $scope.signOn = function () {
        $http.post('http://localhost:a location on my backend').then(function (response) {
            if (response.data.token) {
                $scope.$apply.isLoggedIn = true;
                $state.go('main'); 
                //...

我在这里做错了什么？我是角色的新手，但在没有这个问题的情况下使用过hide和show。

Answer 1

我认为你需要改变你的逻辑。默认情况下不要应用my-hidden-xs类，而是使用ngClass指令：

<div class="container" ng-class="{'my-hidden-xs': !isLoggedIn}">

然后在需要时将旗帜设置为true：

$scope.isLoggedIn = true;

Answer 2

你能尝试更改你显示的css：none！important，我看不到任何改变成功函数的代码你可以使用这样的东西：

<div class="container {{checkVisible(isLoggedIn)}}">

控制器中的

$scope.checkVisible()
{
 if(isLoggedIn)
      return '';
 else
      return 'my-hidden-xs';   
}

Answer 3

等待。 ng-cloak不会覆盖你的ng-show，你会定义display：none两次，而ng-show不会影响你的类定义。

仅将您的DIV行更改为：

<div class="container" ng-show="isLoggedIn">

当然，如果您的页面有一个轻弹，请插入带有ng-cloak的外部div

<div ng-cloak>
    <div class="container" ng-show="isLoggedIn"> 
    ...

Answer 4

所有指令都有自己的执行优先级，我在文档中找不到详细信息，但你可以查看源代码来找到它，例如：https://github.com/angular/angular.js/blob/v1.2.0-rc.2/src/ng/directive/ngRepeat.js#L215

您也可以按照相同的方式设置指令的优先级。

Answer 5

我找到了解决这个问题的方法，我在配置中创建了一个函数来设置登录属性，而不是 NG-节目= “isLoggedIn”

我有 NG-节目= “isLoggedIn（）”

然后当我验证我的JWT时，我调用该函数传递true，它有点像hack但是它可以工作而且我可以继续前进，我有一种感觉，当我进入JWTS的验证时前端多了一点我会将其中一部分抽象为服务。

为什么即使使用自定义指令，Angular ng-cloak也会覆盖我的ng-show

5 个答案: