Angularjs - hide div with “if” and “else”

问题

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>

回答1:

According to your comment that getAuthenticatedAccount is always asynchronous:

This means you'll need to either A) explicitly watch it, or B) evaluate it once it completes. Something like this:

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

    if(!account || account.username !== username) {
      vm.profileCog = false;
    }
  });

// rest of code omitted

You'll need to make sure that Authentication.getAuthenticatedAccount returns a promise for this to work (by default, async calls using AngularJS internal libraries should always return a promise, aka, something that is thenable).

回答2:

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>

回答3:

you need to specify the controller and app name in your html file:

1) specify the controller and app name in any parent tag of current div tag if any

2) otherwise, specify the same with in the same div tag Like:

angular.module('showApp', [])

.controller('mainController', function($scope) {
  $scope.isvisible=false;
  $scope.showDiv=function()
  {
    if(!$scope.isvisible)
      $scope.isvisible=true
      else
        $scope.isvisible=false
  }
        
});

<!doctype html>
<html lang="en"  >
<head>
  <meta charset="UTF-8">
  <title>Example</title> 

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.js"></script>
  

  
</head>
<body ng-app="showApp" ng-controller="mainController">
  Show me: <input type="checkbox" ng-click="showDiv()" ><br/>

  <div  ng-show="isvisible">I show up when your checkbox is checked.
  </div>
</body>
</html>

Thanks,

来源：https://stackoverflow.com/questions/32174018/angularjs-hide-div-with-if-and-else