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

以上代码将更改为

以下

Task

Demo Here

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

1 个答案: