相同的指令不同的導航欄樣式

Question

我想重複使用相同的導航欄，但在主頁有不同的樣式比其他應用程序。我所做的就是，創建基於$location.path()條件邏輯來呈現不同的導航欄，就像這樣：

angular.module('myApp').directive('navbar',['$location', 
    function($location){ 
    var template = ''; 
    if($location.path() === '/') { 
     template = 'app/templates/mainpage-navbar' 
    } else { 
     template = 'app/templates/navbar' 
    } 
    return { 
     templateUrl: template 
    } 
    } 
]); 

我的問題是，說我在炫魅，然後我點擊去別的地方的應用，它不會更新新的導航欄，只有當我刷新頁面。

這裏最好的辦法是什麼？刷新指令？

Answer 1

基本上你是在指令編譯階段編寫代碼的時候，當angular指令開始編譯該DOM元素時，它只執行一次。在您的指令中，您應該在$location上擁有$on$locationChangeSuccess，以便在發生位置更改時該函數將觸發，並且您需要在該函數內執行您。

angular.module('myApp').directive('navbar',['$location', 
    function($location){ 

    //compile phase 
    //this is getting executed only once. 

    return { 
     templateUrl: template 
    } 
    } 
]); 

以上代碼將得到改變，以低於

angular.module('myApp').directive('navbar', ['$location', 
    function($location) { 
    return { 
     template: '<div ng-include="template"></div>', 
     link: function(scope, element, attrs) { 
     var getTemplateUrl = function() { 
      if ($location.path() === '/') { 
      scope.template = 'mainpage-navbar.html'; 
      } else { 
      scope.template = 'navbar.html'; 
      } 
     }; 
     scope.$on('$locationChangeSuccess', function(event) { 
      getTemplateUrl(); 
     }); 
     } 
    }; 
    } 
]); 

Demo Here