Angularjs - 使用“if”隐藏div和“其他” [英] Angularjs - hide div with "if" and "else"

问题描述

我只想在用户登录时在其个人资料中显示一个div，但在注销时和其他用户个人资料时禁用。

我试图做这下面但不成功。我想知道什么是最好的方式去做这件事？

Service.js

$ b $

 （function（）{
'use strict'; 
 
 
 .module （'app.authentication.services'）
 .factory（'Authentication'，Authentication）; 
 
 Authentication。$ inject = ['$ cookies'，'$ http']; 
 
函数认证（$ cookies，$ http）{
 
 var认证= {
 getAuthenticatedAccount：getAuthenticatedAccount，
 isAuthenticated：isAuthenticated 
}; 
 
 return认证; 
 
函数getAuthenticatedAccount（）{
 if（！$ cookies.authenticatedAccount）{
 return; 
} 
返回JSON.parse（$ cookies.authenticatedAccount）; 
} 
函数isAuthenticated（）{
 return !! $ cookies.authenticatedAccount; 
} 
}）（ ）; 
  

Controller.js

$ p $ （function（）{
'use strict';


.module（' app.profiles.controllers'）
.controller（'ProfileController'，ProfileController）;

ProfileController。$ inject = ['$ location'，'$ routeParams'，'Posts'，''

函数ProfileController（$ location，$ routeParams，Posts，Profile，Authentication，Snackbar）{
var vm = this;

激活（）;

函数activate（）{
var authenticatedAccount = Authentication.getAuthenticatedAccount（）;
var username = $ routeParams.username.substr（1）;

//这将显示齿轮设置按钮
//当用户登录并且在他们的配置文件中
//但是在注销时隐藏以及在
/ /另一个用户配置文件

if（！authenticatedAccount）{
vm.profileCog = false;
// console.log（'用户未登录'）;
}
else {
if（authenticatedAccount.username！== username）{
vm.profileCog = false;
// console.log（'Not logged in user'）;
}
else {
vm.profileCog = true;
//console.log('logged in user'）;
}
}
}
}）（）;


profile.html

 < div ng-controller =ProfileCogController> 
< div ng-show =！profileCog>< / div> 
< / div> 
  

解决方案

解决方案：

controller.js

 <$ c $'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$' '，ProfileCogController）; 
 
 ProfileCogController。$ inject = ['Authentication'，'$ routeParams'，'Profile']; 
 
函数ProfileCogController（Authentication，$ routeParams，Profile ）{
 var vm = this; 
 vm.profileCog = false; 
 
 activate（）; 
 
函数activate（）{
 var authenticatedAccount = Authentication.getAuthenticatedAccount（）; 
 var username = $ routeParams.username.substr（1）; 
 $ b $ if（！authenticatedAccount）{
 vm.profileCog = false; 
 // console.log（'用户未登录'）; 
} 
 else {
 if（ authenticatedAccount.username！==用户名）{
 vm.profileCog = false; 
 // console.log（'Not logged in user'）; 
} else {
 vm.profileCog = true; 
 // console.log（'登录用户'）; 
} 
} 
} 
} 
}）（）; 
  

profile.html

 < div ng-controller =ProfileCogController> 
< div ng-show =vm.profileCog>< / div> 
< / div> 
  

I would only like to show a div when user is logged in and on their profile but disabled when logged off and on another users profile.

I attempted to do this below but was unsuccessful. I would like to know what is the best possible way of going about this?

Service.js

(function () {
  'use strict';

  angular
    .module('app.authentication.services')
    .factory('Authentication', Authentication);

  Authentication.$inject = ['$cookies', '$http'];

  function Authentication($cookies, $http) {

    var Authentication = {
      getAuthenticatedAccount: getAuthenticatedAccount,
      isAuthenticated: isAuthenticated
    };

    return Authentication;

    function getAuthenticatedAccount() {
        if(!$cookies.authenticatedAccount) {
            return;
        }
        return JSON.parse($cookies.authenticatedAccount);
    }
    function isAuthenticated() {
        return !!$cookies.authenticatedAccount;
    }  
})();

Controller.js

(function () {
'use strict';

angular
    .module('app.profiles.controllers')
    .controller('ProfileController', ProfileController);

ProfileController.$inject = ['$location', '$routeParams', 'Posts', 'Profile', 'Snackbar'];

function ProfileController($location, $routeParams, Posts, Profile, Authentication, Snackbar) {
    var vm = this;

    activate();

    function activate() {
        var authenticatedAccount = Authentication.getAuthenticatedAccount();
        var username = $routeParams.username.substr(1);

         // This will show Cog settings button 
        // when user is logged in and on their profile, 
       // but hidden when logged off and also when on 
       // another users profile

        if (!authenticatedAccount) {
            vm.profileCog = false;
            // console.log('User not logged in');
        }
        else {
            if(authenticatedAccount.username !== username) {
                vm.profileCog = false;
                // console.log('Not logged in user');
            }
            else {
                vm.profileCog = true;
               //console.log('logged in user');
            }
    }
}
 })();

profile.html

<div ng-controller="ProfileCogController">
    <div ng-show="!profileCog"></div>
</div>

解决方案

Solved:

controller.js

(function () {
'use strict';

angular
    .module('resonanceinn.profiles.controllers')
    .controller('ProfileCogController', ProfileCogController);

ProfileCogController.$inject = ['Authentication', '$routeParams', 'Profile'];

function ProfileCogController(Authentication, $routeParams, Profile) {
    var vm = this;
    vm.profileCog = false;

    activate();

    function activate() {
        var authenticatedAccount = Authentication.getAuthenticatedAccount();
        var username = $routeParams.username.substr(1);

        if (!authenticatedAccount) {
            vm.profileCog = false;
            // console.log('User not logged in');
        }
        else {
            if(authenticatedAccount.username !== username) {
                vm.profileCog = false;
                // console.log('Not logged in user');
            } else {
                vm.profileCog = true;
                // console.log('logged in user');
            }
        }
    }
}
})();

profile.html

<div ng-controller="ProfileCogController">
    <div ng-show="vm.profileCog"></div>
</div>

这篇关于Angularjs - 使用“if”隐藏div和“其他”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！