Question

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

这样的东西

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

被翻译成类似

的东西

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

或任何可行的。作为奖励，即使当前网址已经.../#overview，我也希望链接正常工作。¹

这听起来很琐碎，但我还是坚持像

这样的东西

.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>";
        }
    };
})

我非常确定，我做错了。我几乎可以肯定这一切都是不必要的复杂。但是，我希望能够从答案中学到一些东西。

¹我发现自己反复点击这样一个链接，以便进入原始状态＆＃34;并且想知道什么都没发生。显然，浏览器会忽略指向当前位置的链接，但是有可能解决这个问题吗？

Answer 1

您可以动态地将click事件添加到指令。

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

plunker：http://plnkr.co/edit/n6VbZnAVzM4y0p8dbmvf?p=preview

Answer 2

看一下这个例子：

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

你可以玩它here (plnkr)

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

2 个答案: