Javascript 如何通过不同的视图/控制器在特定元素上设置ng show？_Javascript_Angularjs_Angular Ui Router_Angularjs Controller_Angularjs Ng Show

Javascript 如何通过不同的视图/控制器在特定元素上设置ng show？

javascript angularjs

Javascript 如何通过不同的视图/控制器在特定元素上设置ng show？,javascript,angularjs,angular-ui-router,angularjs-controller,angularjs-ng-show,Javascript,Angularjs,Angular Ui Router,Angularjs Controller,Angularjs Ng Show,普朗克：下面是我的标题，有一个ng show=“cornerLogo”，我只想在“关于”、“登录”和“注册”视图中设置它，但在“主页”视图中设置它 <body id="body_id" ng-app="myApp" ng-controller="HomeCtrl"> <header> <section ng-show="cornerLogo"> <h1><a href="index.html">L

普朗克：

下面是我的标题，有一个

ng show=“cornerLogo”

，我只想在“关于”、“登录”和“注册”视图中设置它，但在“主页”视图中设置它

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

但是，当我切换到about、login或register视图时，我会丢失

$scope

是否有一种方法可以在我的stateProvider for 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');
}]);

你可以检查你的当前状态，这取决于是否显示你的徽标

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

更新：

这是一个带有

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

您已在

home

部分的状态注册中将

HomeCtrl

指定为绑定控制器。因此，应该为应用程序创建一个主控制器。这样你就可以把责任分开。注入

$state

并公开名为

hideLogo

的方法，并使用

$state.is

确定显示/隐藏徽标的逻辑

i、 e:

在索引html中，使用

MainCtrl

作为应用程序的主控制器

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

只需在视图中使用它：

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

小心，您定义了两次

HomeCtrl

，第一次是在home状态，第二次是在

body

标记中--他说了什么，ui视图在哪里，模块也不依赖ui.router？@LeonGaban您根本没有使用

ui视图

？想知道你在用

ng controller=“HomeCtrl”

做什么？你的整个代码看起来让我很困惑。您也没有使用非常方便的

ui-sref

。？我使用的是ui视图，我将其添加到上面的HTML代码中。还想在这里像这样重新创建我的项目@LeonGaban？我会更新我的答案。好的，我现在正在使用它，但是现在在所有视图上获得

，而不仅仅是主页？@LeonGaban，因为你的锚元素不正确。您需要使用

ui href

而不是

href

。检查我的答案，我已经更新了。好了，准备好了，介意看一下吗？：）@LeonGaban我看到了错误，让我来编辑你的plunker。@LeonGaban完成了，看看你需要在主模块中注入

$state

，才能执行

$state。包括（'home'）

，谢谢，下次我一定会在提出更高级的问题之前创建plunker。@LeonGaban没有问题。将控制器分开。创建越来越多的控制器并明确分离关注点没有错。：）

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

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

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

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