1

プランカー: http://plnkr.co/edit/0efF1Av4lhZFGamxKzaO?p=preview

以下は私のヘッダーです。about 、login、および register ビューng-show="cornerLogo"のみに設定したいものがありますが、home ビューには設定します。truefalse

<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 がページのメイン コントローラーであるため、HomeCtrl で動作します。

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

    $scope.cornerLogo = false;

}]);

ただし、about、login、または register ビューに切り替えると、それが失われます$scope

ui-router の stateProvider のどこかにグローバル変数を設定する方法はありますか? そうでなければ、この問題についてどのように対処しますか?

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');
}]);
4

2 に答える 2

2

質問での私のコメントとは別に、問題を解決するには、このアプローチを取ることができます。

パーシャルHomeCtrlの状態登録でバインドされたコントローラーとして指定しました。home代わりに、アプリケーションのメイン コントローラーを作成します。責任を分離しておくために。$state呼び出されたメソッドを挿入して公開し、ロゴを表示/非表示にするロジックを決定するためにhideLogo使用します。$state.is

すなわち:

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

インデックス htmlMainCtrlで、アプリのメイン コントローラーとして使用します。

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

プランク

ビューで直接使用する場合$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')">
于 2015-01-20T03:15:56.023 に答える
1

現在の状態を確認し、それに応じてロゴを表示するかどうかを確認できます。

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

また、ナビゲートするアンカー要素は、このようにする必要があります。<a ui-sref="about">About</a>これは、通常のhref属性を使用すると角度が変化しないためです。

$stateまた、メインモジュールに注入する必要があり、$stateモジュールを使用できます

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

アップデート：

ここに答えのあるpunklrがあります

于 2015-01-20T02:39:14.770 に答える