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 多次触发。