动态网址上的角活动类

Question

我正在尝试在链接中添加“活动”类：

<a href="#/requests/{{request.id}}/processes" active>Processes</a>

输出：

<a href="#/requests/7cgSiSdaIR/processes" active="">Processes</a>

这是我的指令：

.directive('active', function($location) {
  return {
    link: function(scope, el, attrs) {
      if('#'+$location.path() == attrs.href) {
        el.addClass('active');
      }
    }
  }
})

当我console.log（attrs.href）时，它输出#/requests//processes ，因此绑定值尚不存在。

我该如何解决？

谢谢。

Answer 1

尝试：

.directive('active', function($location) {
  return {
    link: function(scope, el, attrs) {
      scope.$watch(function(){
         return attrs.href;
      },function(newValue){
         el.toggleClass('active','#'+ $location.path() == newValue);
      });
    }
  }
});

但我认为您需要这样做：

.directive('active', function($location) {
      return {
        link: function(scope, el, attrs) {
          scope.$watch(function(){
             return '#'+ $location.path() == attrs.href; //always update when one of them changes
          },function(newValue){
             el.toggleClass('active',newValue);
          });
        }
      }
 });