Angularjs - скрыть div с помощью «если» и «еще»

0

Мне бы хотелось показать 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>
  • 0
    Где вызывается profileCog ()? Это личное в ProfileController.
  • 0
    @WayneEllery это было легко. Я исправил это. Моя попытка была сделать его логическим, и он вернул бы true, только если пользователь был в своем профиле. Я просто хотел бы знать, как правильно добиться этого.
Показать ещё 17 комментариев
Теги:
angularjs-directive

3 ответа

0
Лучший ответ

Решено:

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

Согласно вашему комментарию, 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 всегда должны возвращать обещание, ака-то, что then возможно).

-1

вам нужно указать имя контроллера и приложения в вашем html файле:

1) укажите имя контроллера и приложения в любом родительском теге текущего тега div, если

2) в противном случае укажите то же самое в одном теге div. Например:

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>

Благодаря,

  • 0
    Это не помогает. Мой контроллер определен в моем rout.js. Мое приложение определено в моем index.html, где ng-view показывает загруженные шаблоны.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню