Angularjs指令，使任何元素都像链接一样工作

我试图编写一个指令，使任意元素像链接一样工作。差不多

<span goto="overview">Overview</span>

<span ng-click="$location.path('#/overview')">Overview</span>

.directive('goto', function($location) {
    return {
        template: function(element, attrs) {
            // Here `attrs` should be used but how?
            var ref = "#/" + element.attr('goto');

            // This is a mystery to me.
            // I guess, transclusion is the way to go, but how exactly?
            var elementContent = getEverythingBelowElementButHow();

            // I doubt `$location` will be visible on the invocation site.
            return "<span ng-click='$location.path(" +
                ref + "'>" +
                elementContent +
                "</span>";
        }
    };
})

我完全肯定，我做错了。我几乎可以肯定这一切都是不必要的。然而，我希望能够从答案中学到一些东西

---

---

1我发现自己反复点击这样一个链接，以进入“原始概览状态”，并怀疑什么都没有发生。很明显，浏览器会忽略指向当前位置的链接，但有一种方法可以解决此问题。

请看一个例子：

app.directive('goto', function($location){
  function link(scope, element, attr){
    scope.gotoLink = function(){
      alert(scope.goto);
      //$location.path(scope.goto);
    };
  }

  return {
    restrict: 'A',
    transclude: true,
    scope:{ goto: '@' },
    template: '<span ng-click="gotoLink()"><span ng-transclude></span></span>',
    link: link
  };
});

app.directive（'goto'，函数（$location）{
功能链接（范围、元素、属性）{
scope.gotoLink=函数（）{
警报（scope.goto）；
//$location.path（scope.goto）；
};
}
返回{
限制：“A”，
是的，
作用域：{goto:'@'}，
模板：“”，
链接：链接
};
});

---

您可以玩它

您可以将单击事件动态添加到指令中

angular.module('ExApp')
 .directive('goto', function($location) {
   return {
     restrict: 'A',
     scope: {
       //scope variables            
     },
     link: function(scope, element, attr) {
       element.on('click', function() {
         $location.path('/overview');
         scope.$apply();
       });
     }
   }
 });

---

普朗克：

完美。一个附带问题：我发现在scope中使用

@

更好，但我很好奇如何在

链接中使用
attr
？我尝试了
attr.goto
并在调试器中查看了它，但我看不到任何可用的东西。