Как настроить ng-show для определенного элемента через разные представления/контроллеры?

Планкер: http://plnkr.co/edit/0efF1Av4lhZFGamxKzaO?p=preview

Ниже мой заголовок, есть ng-show="cornerLogo", который я хочу установить только true в представлениях about, login и register, но false в домашнем представлении.

<body id="body_id"
  ng-app="myApp"
  ng-controller="HomeCtrl">

  <header>
    <section ng-show="cornerLogo">
        <h1><a href="index.html">Logo</a></h1>
    </section>

    <nav id="main_nav">
        <ul>
            <li><a ui-sref="about">About</a></li>
            <li><a ui-sref="login">Sign In</a></li>
            <li><a ui-sref="register">Create Account</a></li>
        </ul>
    </nav>
  </header>

  <ui-view></ui-view>

Так что это работает в моем HomeCtrl, потому что это главный контроллер на странице.

var app = angular.module('app-home', [])
.controller('HomeCtrl', ['$scope', function($scope) {

    $scope.cornerLogo = false;

}]);

Однако, когда я переключаюсь на просмотр, вход или регистрацию, я теряю это $scope

Есть ли способ установить глобальную переменную где-нибудь в моем stateProvider для ui-router? Иначе как бы вы подошли к этому вопросу?

var app = angular.module('bitAge',
    ['ui.router',
     'app-header',
     'app-home',
     'app-about',
     'app-login',
     'app-register'])

.config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: '_views/home.html',
                controller: 'HomeCtrl',
            })

            .state('about', {
                url: '/about',
                templateUrl: '_views/about.html',
                controller: 'AboutCtrl'
            })

            .state('login', {
                url: '/login',
                templateUrl: '_views/login.html',
                controller: 'LoginCtrl'
            })

            .state('register', {
                url: '/register',
                templateUrl: '_views/register.html',
                controller: 'RegisterCtrl'
            });

        // default view:
        $urlRouterProvider.otherwise('/home');
}]);

javascript angularjs angular-ui-router angularjs-controller angularjs-ng-show
person Leon Gaban    schedule 20.01.2015    source источник
comment
будьте осторожны, вы определяете свой HomeCtrl дважды, сначала в домашнем состоянии, а также в теге body   -  person levi    schedule 20.01.2015
comment
^-- Что он сказал и где находится ui-view, а также модуль не имеет зависимости от ui.router?   -  person PSL    schedule 20.01.2015
comment
@LeonGaban Ты вообще не используешь ui-view? Интересно, что ты делаешь с ng-controller="HomeCtrl"? Весь ваш код кажется мне запутанным. Вы также не используете ui-sref, что очень удобно.   -  person PSL    schedule 20.01.2015
comment
? Я использую ui-view, я добавил его в свой HTML-код выше. Также пытаюсь воссоздать мой проект здесь plnkr.co/edit/0efF1Av4lhZFGamxKzaO?p=preview   -  person Leon Gaban    schedule 20.01.2015
comment
@LeonGaban нравится это? plnkr.co/edit/hgEafncN41SQt0c4plw7?p=preview Я обновлю свой ответ.   -  person PSL    schedule 20.01.2015

Ответы (2)


arrow_upward
2
arrow_downward

Помимо моих комментариев в вопросе, чтобы решить вашу проблему, вы можете использовать этот подход.

У вас HomeCtrl указан в качестве связанного контроллера в государственной регистрации home частичного. Поэтому вместо этого создайте основной контроллер для вашего приложения. Чтобы вы разделяли обязанности. Внедрите $state и предоставьте метод с именем hideLogo и используйте $state.is, чтобы определить логику для отображения/скрытия логотипа.

i.e:

var app = angular.module('app-home')
.controller('MainCtrl', ['$scope', '$state',  function($scope, $state) {
   $scope.hideLogo = function(){
     return $state.is('home');
   }
}]);

В индексном html используйте MainCtrl в качестве основного контроллера для приложения.

<body ng-app="myApp" ng-controller="MainCtrl">
    <header>
    <section 
      ng-hide="hideLogo()">
      <h1><a href="index.html">Corner Logo</a></h1>
    </section>

Plnkr

Если вы хотите использовать $state непосредственно в представлении, вам нужно будет внедрить его в MainCtrl и установить $state в объекте $scope, чтобы вы могли использовать его напрямую. Хотя я настоятельно рекомендую не использовать эту технику, вы не должны выставлять состояние в объекте области действия и, в конечном счете, в представлении. Просто выставляйте только то, что нужно в модели представления.

то есть в MainCtrl :

 var app = angular.module('app-home')
.controller('MainCtrl', ['$scope', '$state',  function($scope, $state) {
   $scope.$state= $state;
}]);

и просто используйте его в представлении как:

<section 
      ng-hide="$state.is('home')">
person PSL    schedule 20.01.2015
comment
Спасибо, я обязательно сделаю плунжер в следующий раз, прежде чем задать более сложный вопрос, подобный этому. - person Leon Gaban; 20.01.2015
comment
@LeonGaban Никаких проблем. Держите контроллеры отдельно. Нет ничего плохого в том, чтобы создавать все больше и больше контроллеров и иметь четкое разделение задач. :) - person PSL; 20.01.2015

arrow_upward
1
arrow_downward

Вы можете проверить свое текущее состояние и зависит от того, показывать или нет ваш логотип.

<section ng-show="$state.includes('home')">
    <h1><a href="index.html">Logo</a></h1>
</section>

Кроме того, ваши элементы привязки для навигации должны быть такими, как <a ui-sref="about">About</a> и т. д., потому что, если вы используете обычный атрибут href, angular не изменит состояние.

Кроме того, вам нужно внедрить $state в ваш основной модуль, а затем вы можете использовать модуль $state

    var app = angular.module('myApp',
        ['ui.router',
         'app-home',
         'app-about']).run(function ($state,$rootScope) {
    $rootScope.$state = $state;
})

ОБНОВИТЬ:

Вот punklr с ответом.

person levi    schedule 20.01.2015
comment
Хорошо, я использую это сейчас, но теперь получаю <section ng-show="$state.includes('home')" class="ng-hide"> во всех представлениях, а не только дома? - person Leon Gaban; 20.01.2015
comment
@LeonGaban, потому что ваши элементы привязки неверны. Вам нужно использовать ui-href, а не href. Проверьте мой ответ, я обновил его. - person levi; 20.01.2015
comment
Хорошо, плунжер готов, не могли бы вы взглянуть? :) plnkr.co/edit/0efF1Av4lhZFGamxKzaO?p=preview - person Leon Gaban; 20.01.2015
comment
@LeonGaban, я увидел ошибку, позвольте мне отредактировать ваш плункер. - person levi; 20.01.2015
comment
@LeonGaban сделал, посмотрите здесь вам нужно ввести $state в основной модуль, чтобы в состоянии выполнить $state.includes('home') - person levi; 20.01.2015
comment
Спасибо! тот же ответ ... ваш плунжер не сработал: o - person Leon Gaban; 20.01.2015