在用户用angularjs登录后显示一个隐藏的元素

Iam对于angularjs和jquery mobile来说比较新。我被要求为我的下一个项目研究这些框架，所以Iam试图实现某些功能。我创建了一个头版，一个元素被隐藏起来，这个页面会显示在最初。然后点击登录，用户将被重定向到登录页面，在那里他提供用户名密码登录。然后他将被重定向到相同的首页，但我想隐藏元素是visible.Can你帮我this.My元素总是隐藏，我无法弄清楚什么荫做wrong.The标签与喜迎宾用户文本必须是登录后可见在用户用angularjs登录后显示一个隐藏的元素

这里是我的html前页面

<div data-role="page" id="panel-responsive-page1" data-title="Panel responsive page" data-url="panel-responsive-page1"> 
<div role="main" class="ui-content"> 
       /**some content **/ 
      <div class="ui-grid-solo" ng-controller="LoginCtrl" > 
       <p ng-hide="userWelcome">Hi welcome User </p> 
      </div> 
     </div> 
    <div data-role="panel" id="nav-panel"> 
      <ul data-role="listview"> 
       <li><a href="#login-form">Login</a></li> 
       <li><a href="#">Register</a></li> 
      </ul> 
     </div> 
    </div>

在点击登录，我将被重定向到登录页面

<div data-role="page" id="login-form"> 
     <!-- header --> 
     <div data-role="header" class="backgroundColorPink"> 
      <h1>Login Form</h1> 
     </div> 
     <!-- Form Content --> 
     <div role="main" class="ui-content jqm-content"> 
      <form class="userform"> 
       <h2>Login</h2> 
       <label for="name">Username:</label> 
       <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true" ng-model="userDetails.name"> 
       <label for="password">Password:</label> 
       <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true" ng-model="userDetails.password"> 
       <div class="ui-grid-a" ng-controller="LoginCtrl"> 
        <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn backgroundColorPink ">Cancel</a></div> 
        <div class="ui-block-b "><a href="#" class="ui-btn backgroundColorPink" ng-click="userLogin()">Save</a></div> 

       </div> 

      </form> 
     </div> 
    </div>

在点击保存，我会isssue一个Ajax调用，并在成功登录，我将被重定向到头版，我的登录元素必须可见。

赫斯我控制器

angular.module('jQMDemo', []) 


function LoginCtrl($scope,$http,$window) { 
$scope.userWelcome=true; 
$scope.userLogin = function() { 



    var data={username: $scope.userDetails.name, password: $scope.userDetails.password, callfrom: "Portal"} ; 
     $http.post('url',data).success(function(data,status) { 
      alert(data.status); 
        if(data.status=="success"){ 
         $window.location.href='#panel-responsive-page1'; 
         $scope.userWelcome=false; 
        } 

     }); 

    } 
}

我可能会使用控制器错误或NG-hide..Please帮助也许错的使用，我不能弄明白

来源

2014-04-23 ShinyJos

//codes

1 - 如果在你的控制器否则将留隐患存在elemtn这将显示2-你可以使用它，所以当你点击按钮，如果一切都很好，用户登录你创建的元素，然后让班级控制器为你做的工作 –

的工作，我实现的功能使用toggleclass 我在控制器中添加以下代码：

$(".userWelcome").toggleClass("show");

在我的HTML这

<div class="ui-grid-solo hide userWelcome backgroundColorPink " > 
    <p class="alignMiddle ">Hi welcome {{userDetails.name}} </p> 
</div>

我能得到所需的result.If任何人有任何其他的方式来实现这一目标，请建议

来源

2014-04-25 05:42:53 ShinyJos

<div ng-show="element.show"> 
    <!--codes--> 
</div>

这将显示该元素是否存在于您的控制器中否则它会保持隐藏状态
你可以利用这一点，所以当你点击按钮，如果一切好，用户登录ü创建元素，然后让类控制器为你做

来源

2014-04-23 13:50:25

你能告诉我如何在控制器。谢谢你的答案 – ShinyJos

在用户用angularjs登录后显示一个隐藏的元素

回答

相关问题