如何通过不同的views/controllers在特定元素上设置ng-show？

Question

笨蛋：http://plnkr.co/edit/0efF1Av4lhZFGamxKzaO?p=preview

下面是我的 header，有一个 ng-show="cornerLogo" 我只想在关于、登录和注册视图上设置 true，但是 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');
}]);

Answer 1

您可以检查您的当前状态，并根据此情况显示或不显示您的徽标。

<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;
})

更新：

这是朋克乐队 answer

Answer 2

除了我在问题中的评论之外，要解决您的问题，您可以采用这种方法。

您在 home 部分的状态注册中将 HomeCtrl 指定为绑定控制器。因此，改为为您的应用程序创建一个主控制器。这样您就可以将 职责分开 。注入 $state 并公开一个名为 hideLogo 的方法，并使用 $state.is 确定 show/hide 徽标的逻辑。

即：

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 中，并在 $scope 对象上设置 $state，以便您可以直接使用它。尽管我强烈建议不要使用此技术，但您不应在范围对象中并最终在视图中公开状态。只公开视图模型中需要的内容。

即在 MainCtrl 中：

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

并在视图中使用它作为：

<section 
      ng-hide="$state.is('home')">

如何通过不同的views/controllers在特定元素上设置ng-show？

How to set ng-show on a specific element through different views/controllers?

javascript

angularjs

angularjs-controller

angular-ui-router

angularjs-ng-show