$ rootscopeを使用して表示/非表示

Question

一部のページで非表示にする必要があるindex.htmlテンプレートに検索バーがあります。私はui-routerと$stateを使用しています。

この作業を行う唯一の方法は、ng-hide: trueまたはfalseのいずれかに、すべてのコントローラに$rootscopeを注入して、必要に応じてオンまたはオフにすることです。 （私は本当に1,2ページに隠す必要があります）

これは私のすべてのコントローラが現在依存しており、$rootscopeに注入されているので、これを行う正しい方法ではないと思います。

これを行う別の方法はありますか？例えば

Answer 1

bodyまたはhtmlタグ（ng-controller="GlobalCtrlなど）に追加されたグローバルコントローラの例GlobalCtrlから始めましょう。 （あなたがui-routerを使用しているとして）これを行う

はあなたの単一のページアンギュラアプリを通じてこのGlobalCtrlの範囲を保つために私たちを可能にします、我々は（実際に$rootScopeの使用を模倣する）$rootScopeの使用を避けることができます。あなたのindex.htmlで、今

// Using an object to avoid the scope inheritance problem of Angular 
// https://github.com/angular/angular.js/wiki/Understanding-Scopes 
$scope.globalData = {showSearchBar: true}; 

// This callback will be called everytime you change a page using ui-router state 
$scope.$on('$stateChangeStart', function(event, toState, toParams) { 
    $scope.globalData.showSearchBar = true; 

    // Just check for your page where you do not want to display the search bar 
    // I'm using just an example like I don't want to display in contac-us page named state 
    if (toState.name == 'contact-us' || toParams.foo == "bar") { 
     $scope.globalData.showSearchBar = false; 
    } 
}); 

、ちょうどng-showを使用します：

<div ng-show="globalData.showSearchBar"> 
    <input type="text" ng-model="query" /> 
</div> 

Answer 2

<div ng-controller="SearchCtrl"> 
<div ng-if="show"> 
... 
</div> 
</div> 

app.controller('SearchCtrl', ['$state', '$scope', function($state, $scope) { 
    $scope.show = !$state.is('someState1') && !$state.is('someState2'); 
} 

これは良いスタイルではなく、単に働くでしょう。

Answer 3

私は、コントローラで起こって好きではない、私あなたのGlobalCtrlこのような何かを定義する内部今

、別のコントローラーに依存しない方法でアプリケーションの各部分を分離する方がよいと考えてください。

私は、データを共有するためのサービスを使用します。

'use strict'; 

angular.module('yourModule') 
    /** 
     A service used to share resources between controllers 
    */ 
    .factory('Shared', [function() { 
     var resources = {}; 

     resources.targetList = []; 
     resources.isVisibleDivA = true; 
     resources.isVisibleDivB = false; 

     return resources; 
    }]); 

このように、あなたは常に正しく、あなたのレイアウトをフォーマットするために必要な状態変数と対話することができるようになりますサービスを注入します。

コントローラーを再利用したい場合は、模擬サービスを追加するだけで、コントローラーに依存する必要はありません。

Answer 4

ui-routerでは、abstract statesを使用して階層を作成できます。あなたは親ルートの魔法使いに検索バーのビューとそれ以外のものを持たせることができます。すべてのあなたの実際のルートはこれらの2つから継承することができます。この

$stateProvider 
.state('rootLayout', { 
    abstract: true, 
    // Note: abstract still needs a ui-view for its children to populate. 
    // You can simply add it inline here. 
    template: '<div><div ui-view="topbar"></div><div ui-view></div></div>' 
}) 
.state('searchbarLayout', { 
    abstract: true, 
    views: { 
     '@rootLayout': { 
      // Note: abstract still needs a ui-view for its children to populate. 
      // You can simply add it inline here. 
      template: '<div ui-view></div>' 
     }, 
     'topbar@rootLayout': { 
      template: '<input type="search" />' 
     }, 
    }  
}); 

Answer 5

よう

何かあなたが式の中で$rootを使用して、テンプレートから$ rootScopeにアクセスすることができます。同様に：

<div ng-show="$root.appSettings.flag"> 
    <span>Hello!</span> 
</div> 

Answer 6

私は値を変更するためにスコープを使用すると、アプリケーションの実行機能に

.run([ '$rootScope', function ($rootScope) { 
    $rootScope.searchBar = { value: true }; 
}]) 

をオブジェクトを登録しました。これは

<div ng-show="searchBar.value" ng-include src="'app/shared/search.html'"></div>