相同的指令不同的导航栏样式

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