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

编辑：感谢 Mosh-Feu，我设法通过向所有目标元素添加 ng-non-bindable 并如下更改我的指令来使其工作：

.directive('go', function($compile) {
return {
    restrict: "E",
    scope: true,
    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(content.html()); 
                $compile(mainContainer)(scope);
            };
        };
    }
};

});

但是 Aditya Bhave 解决方案更干净，所以我将使用它。非常感谢你们！

Answer 1

问题是，当我们用 html() 替换 div 的 innerHTML 时，它不会将其编译为 angularjs 代码。正确的方法是使用ng-templates.

看看这个 Plunkr - http://next.plnkr.co/edit/x0TiUkka5nJwqB8K

我使用的是 div，ng-include 属性最初设置为 mainBlock.html 模板。
单击事件正在更改父控制器的模板 URL。

注意 - 如果我们将 templateURL 作为属性传递给指令，然后在 onclick 中更改它而不是使用 scope.$parent.

，我们可以获得更简洁的代码

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

ng-click in directive seems to trigger only once

javascript

angularjs

angularjs-ng-click