関数の$ scope.variableを変更しても表示が更新されない

Question

ルートの変更をリッスンし、メニュー（md-nav-bar）の現在のルートを反映する$ scope変数を更新します。

$scope.$on('$routeChangeSuccess', function(event, current) { 
    $scope.currentNavItem = $location.path(); 
    console.log('current location path', $scope.currentNavItem); 
}); 

出力は正しいですが（例： '/ overview'）、ビュー/メニューは更新されません。手動でアップデートを開始する必要がありますか？

Answer 1

イベント関数（setTimeOut、$ scope。$ ... ...など）でスコープ変数を変更する場合は、スコープ内で変数を更新するために手作業で$scope.$apply()を呼び出す必要があります。

$scope.$on('$routeChangeSuccess', function(event, current) { 
    $scope.currentNavItem = $location.path(); 
    $scope.$apply(); 
}); 

これは何とかあなたの変数を設定するコードの周りにタイムアウト機能をラップすることができerror "digest already in progress"になり場合：

$scope.$on('$routeChangeSuccess', function(event, current) { 
    $timeout(function() { 
    $scope.currentNavItem = $location.path(); 
    }) 
} 

しかし、スコープ/ rootScopeイベントはマイナー変数の更新のために使用すべきではありません。それはスケーラビリティではなく、あなたはどこでもイベントリスナーのトンで終わるでしょう。

あなたはUI-ルータにあなたの処分でツールを使用する必要があります。この特定のケースで

：あなたはおそらくすでにへui-srefを使用

• UI-SREF
• UI-SREFアクティブ

状態間をナビゲートする：

<a ui-sref="state1">state1</a> 
<a ui-sref="state2">state2</a> 

ui-routerを使用すると、t彼はui-sref-active指令が対応する場合、あなたのリンクにクラスを追加する指令です。

<a ui-sref="state1" ui-sref-active="active">state1</a> 
<a ui-sref="state2" ui-sref-active="active">state2</a> 

STATE1をクリックすると、次のHTMLが生成されます：あなたは喜ばしかし

<a ui-sref="state1" ui-sref-active="active" class="active">state1</a> 
<a ui-sref="state2" ui-sref-active="active" class="">state2</a> 

あなたは、アクティブクラスのスタイルを設定することができます。