angularjsの動的ヘッダー/メニュー

Question

既存の角サイトを移行中に、迷惑な問題が発生しました。最初の症状は、特定のコントローラがログイン直後に初期化関数を実行していないことでした。私はログに記録して追跡し、最終的にはページのデザイン上の欠陥であることに気付きました。基本的に、index.htmlには<header>,<ng-view>および<footer>が含まれています。私はログイン後に評価したいヘッダーにあるng-if属性がいくつかありますが、ビューが再ロードされる唯一のものであるため、ヘッダーコントローラーを再初期化していないため、ng-if値を更新しませんでした。

その後、完璧な解決策のように思えるngIncludeを思い出しました最初にテンプレートをロードし、ビューが変更されたときに再初期化しません。だから、私はHeaderControllerを別のコントローラーやサービスに渡して、この1つの頑強なブール値をソートのプロキシを通して制御するという明るい考えを得ました。それもうまくいきませんでした。次に、関数とブール値を別のサービスに入れて、ヘッダーコントローラーでそのプロパティーをミラーリングしようとしましたが、これまでのところ、私はこの問題を解決できませんでした。

私はインデックスの複数のビューについて多くの研究を行いましたが、これまではこのui-routerについて多くのことを聞いていましたが、私はまだそれが私が行きたい方法であると確信していません。それは単純な解決策ではないようです。私はまだテンプレートにng-includeを入れてみませんでした。なぜなら、メニューを変更するたびに100ページを更新しなければならない時が来ているように感じるからです。

私はこれに一日を失った。他のテンプレートの外で生きたい私のヘッダーコントローラーのこの1つのプロパティーの評価をどのようにトリガーするか教えていただけたら、教えてください！

Answer 1

あなたがHeaderControllerで知っている必要があるので、ビューがリロードされたとき。これを行うにはいくつかの方法がありますが、この特定のケースでは、より簡単で多分もっと正確なのはイベントです。

このようにビューを更新するときは、新しい値ob1とob2の変数が必要であるとしましょう。

// ViewController 
$rootScope.$emit('viewRefresh', {ob1: 'newvalue1', ob2: 'newvalue2'}); 

そして、（あなたがcontroller as構文を使用していない場合）あなたのHeaderControllerあなたはそのイベントをリッスンする必要があり、あなたの$の範囲でこれらのattrsにのために新しい値を設定しました。

// HeaderController 
$rootScope.$on('viewRefresh', function onRefresh(event, data) { 
    $scope.ob1 = data.ob1; 
    $scope.ob2 = data.ob2; 
}) 

別ソリューション （$qを使用して）サービスを通じて

function HeaderService($q) { 
    var defer = $q.defer(); 
    return { 
     getPromise: function() {return defer.promise}, 
     notify: function(data) {defer.notify(data)} 
    } 
} 

function HeaderController(HeaderService) { 
    var vm = this; 
    HeaderService.getPromise().then(function(data) { 
     vm.ob1 = data.ob1; 
     vm.ob2 = data.ob2; 
    }) 
} 


function ViewController(HeaderService) { 
    var data = {ob1: 'newvalue1', ob2: 'newvalue2'}; 
    HeaderService.notify(data) 
}