Та же директива различного стиля navbar

Question

Я пытаюсь повторно использовать ту же директиву для навигатора, но на домашней странице есть другой стиль, чем остальная часть приложения. То, что я сделал, создавая логику, основанную на $location.path() условие, чтобы представить различные Navbar, как например:

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 
    } 
    } 
]); 

Моя проблема, говорят, что я нахожусь в MainPage, а затем я нажимаю, чтобы пойти куда-нибудь в приложении , он не будет обновлять новую навигационную панель, только если я обновляю страницу.

Какой лучший подход здесь? Обновить директиву?

Answer 1

В принципе, вы написали свой код внутри фаз сбора директивы, который запускается только один раз, когда угловая директива начинает компиляцию этого элемента 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