AngularjsカスタムコンポーネントngSwitchディレクティブのコンパイル順序

Question

対次のコードスニペットがあります：

<my-header></my-header> 
<div ng-switch="$ctrl.page"> 
     <div ng-switch-when="1"><component1></component1></div> 
     <div ng-switch-when="2"><component2></component2></div> 
     <div ng-switch-when="3"><component3></component3></div> 
</div> 

私はngSwitchディレクティブは、アクションを実行する前に、そのコンポーネントmyHeaderが構築されるだろうしたいです。今すぐコンポーネント1は、myHeaderの前に構築されます。あなたはmyHeaderディレクティブ内のリンク機能であなたのコントローラを暴露することによって、これを達成することができます

$stateProvider 
    .state({ 
    name: 'myApp', 
    url: '/', 
    component: 'loader', 
    }) 
    .state({ 
    name: 'myApp.pages', 
    url: 'pages/{id:int}', 
    component: 'loader' 
    }); 
$urlRouterProvider.otherwise('/pages/1'); 

Answer 1

：

ルーティングは、次のコードを表します。

これを使用すると、コントローラに変数を簡単に追加し、ng-ifでng-switch divの表示を制御できます。コードスニペットをここで確認してください。

ああ、ng-switchディレクティブを含むdivにng-cloakを追加することを忘れないでください。

angular 
     .module('app', []) 
     .controller('TestController', function($scope) { 
      this.page = 1; 
     }) 
     .directive('myHeader', function() { 
      return { 
       link: function (scope, element, attrs) { 
        // With element.controller() we can reach the controller that is wrapping our directive. Then, we can simply set the headerIsLoaded variable to true. 
        element.controller().headerIsLoaded = true; 
       }, 
       scope: true, 
       templateUrl: 'my-header.html' 
      } 
     }); 

<div ng-controller="TestController as ctrl"> 

    <my-header></my-header> 

    <!-- Add a visual feedback so user knows the components are being loaded --> 
    <div ng-if="!ctrl.headerIsLoaded"> 
     Loading... 
    </div> 

    <!-- If ctrl.headerIsLoaded is set to true, the ng-switch will appear --> 
    <div ng-if="ctrl.headerIsLoaded" 
     ng-cloak> 
     <div ng-switch="ctrl.page"> 
      <div ng-switch-when="1"> 
       Page 1 
      </div> 
      <div ng-switch-when="2"> 
       Page 2 
      </div> 
      <div ng-switch-when="3"> 
       Page 3 
      </div> 
     </div> 
    </div> 

</div>