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

问题描述

我只想在用户登录并在他们的个人资料上显示一个 div，但在注销和另一个用户个人资料时被禁用.

我尝试在下面执行此操作，但未成功.我想知道解决此问题的最佳方法是什么?

Service.js

(函数(){'使用严格';有角的.module('app.authentication.services').factory('认证', 认证);Authentication.$inject = ['$cookies', '$http'];功能认证($cookies，$http){无功身份验证 = {getAuthenticatedAccount: getAuthenticatedAccount,isAuthenticated: isAuthenticated};返回身份验证；函数 getAuthenticatedAccount() {如果(！$cookies.authenticatedAccount){返回;}返回 JSON.parse($cookies.authenticatedAccount);}函数 isAuthenticated() {返回 !!$cookies.authenticatedAccount;}})();

Controller.js

(函数(){'使用严格';有角的.module('app.profiles.controllers').controller('ProfileController', ProfileController);ProfileController.$inject = ['$location', '$routeParams', 'Posts', 'Profile', 'Snackbar'];function ProfileController($location, $routeParams, Posts, Profile, Authentication, Snackbar) {var vm = 这个；启用();功能激活(){varauthenticatedAccount = Authentication.getAuthenticatedAccount();var username = $routeParams.username.substr(1);//这将显示 Cog 设置按钮//当用户登录并在他们的个人资料上时，//但在注销和打开时隐藏//另一个用户配置文件如果 (!authenticatedAccount) {vm.profileCog = 假；//console.log('用户未登录');}别的 {if(authenticatedAccount.username !== username) {vm.profileCog = false;//console.log('未登录用户');}别的 {vm.profileCog = true;//console.log('登录用户');}}}})();

profile.html

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

解决方案

已解决:

controller.js

(函数(){'使用严格';有角的.module('resonanceinn.profiles.controllers').controller('ProfileCogController', ProfileCogController);ProfileCogController.$inject = ['Authentication', '$routeParams', 'Profile'];功能 ProfileCogController(Authentication, $routeParams, Profile) {var vm = 这个；vm.profileCog = 假；启用();功能激活(){varauthenticatedAccount = Authentication.getAuthenticatedAccount();var username = $routeParams.username.substr(1);如果 (!authenticatedAccount) {vm.profileCog = 假；//console.log('用户未登录');}别的 {if(authenticatedAccount.username !== username) {vm.profileCog = 假；//console.log('未登录用户');} 别的 {vm.profileCog = true;//console.log('登录用户');}}}}})();

profile.html

<div ng-show="vm.profileCog"></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屋！