ng-click in 指令似乎只触发一次

Question

我正在尝试实现一个指令，用 ng-click 替换标签。ng-click 调用一个函数，将 div 的内容（始终相同）替换为另一个元素的内容，其 id 作为参数传递。我设法让它工作，但仅限于第一次点击。之后，页面重新加载，似乎是因为未触发 ng-click ，但（空） href 属性是。

html代码：

  <!-- language: lang-html -->

  <div id="uiMain" class="container">

    Go to <go target="block01">01</go>, <go target="block02">02</go> or <go target="block03">03</go>

  </div>

  <div id="block01" class="block">

    Go to <go target="block02">02</go> or <go target="block03">03</go>

  </div>

  <div id="block02" class="block">

    Go to <go target="block01">01</go> or <go target="block03">03</go>

  </div>

  <div id="block03" class="block">

    Go to <go target="block01">01</go> or <go target="block02">02</go>

  </div>

和我的指令：

.directive('go', function() {

    return {

        restrict: "E",

        scope: {

            target: "@"

        },

        transclude: true,

        template: '<a href="" ng-click="displayBlock(\'{target}\')"><ng-transclude></ng-transclude></a>',

        link: function (scope, element, attrs) {

            scope.displayBlock = function() {

                // Get the content of the target block

                var content = angular.element(document.querySelector("#"+attrs.target));

                // Get the main container

                var mainContainer = angular.element(document.querySelector("#uiMain"));

                // then replace the link with it

                if (content !== null) { 

                    //mainContainer.html($compile(content.innerHTML)($scope)); 

                    mainContainer.html(content.html()); 

                }

            };

        }

    };

});

我曾尝试将我的功能放回控制器，但他的行为是相同的。我还尝试使用 $compile 或 $apply 来确保范围与粘贴的 html 内容是最新的：这不起作用，因为我的目标块中的指令已经编译。

这是我的整个代码的plnkr。

我希望能够点击链接来回移动，但现在有一些东西可以阻止 ng-click 多次触发。