Question

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

我试图在下面这样做，但没有成功。我想知道最好的方法是什么？

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>

Answer 1

根据您的评论，getAuthenticatedAccount始终是异步的：

这意味着您需要A）明确地观察它，或者B）在完成后对其进行评估。像这样：

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

您需要确保Authentication.getAuthenticatedAccount返回一个允许此工作的承诺（默认情况下，使用AngularJS内部库的异步调用应始终返回一个承诺，即{{1} }能）。

Answer 2

<强>解决：

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>

Answer 3

您需要在html文件中指定控制器和应用名称：

1）在当前div标签的任何父标签中指定控制器和应用程序名称（如果有）

2）否则，在同一个div标签中指定相同的内容像：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

谢谢，

Angularjs - 用＆＃34;隐藏div;如果＆＃34;和＆＃34;否则＆＃34;

3 个答案: