Angularjs自定義組件VS 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> 

我想該組件myHeader ngSwitch指令採取動作之前將被修建。現在組件1在myHeader之前構建。

路由代表下面的代碼：

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

Answer 1

您可以通過在myHeader指令裏面的鏈接功能暴露你的控制器實現這一目標。

因此，您可以輕鬆地將變量添加到控制器，並通過ng-if來控制ng-switch div的可見性。查看這裏的代碼片段。

啊，不要忘了添加ng-cloak到包含ng-switch指令的div。

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>