Question

我有一个问题，即尽管它们具有href或ng-href属性，但在元素上激活了角a directive。这会导致在呈现时对这些链接的任何点击都有event.preventDefault()的角度。

我正在渲染的模板在ng-include like指令中呈现。反过来又在另一个指令中呈现。

ng-include指令。

/*
* Use this when you need to include a view but want the scope to be transcluded.
*/
directiveModule.directive('rlInclude', [
  '$compile',
  '$templateRequest',
function (
  $compile,
  $templateRequest,
  $sce
) {
  'use strict';
  return {
    restrict: 'EA',
    transclude: true,
    link: function($scope, elem, attrs){
      var templateUrl = attrs.src;
      $scope.$watch(templateUrl, function(){
        $templateRequest(arguments[0],false).then(function(html){
          var template = angular.element(html);
          elem.html(template);
          $compile(elem.contents())($scope);
        });
      }, true);
    }
  }
}]);

在此指令中渲染以下模板时，锚点不可点击。

<div class="row">
  <div class="col-xs-2">
    <ul class="panel-header-links pull-right ">
      <li ng-click="change()">
        <a ng-href="{{'#/print/history/' + plan.id}}" class="nav-route cursor-pointer" target="history" >
          <span class="glyphicon glyphicon-print"></span>
          <span ng-bind="'PRINT' | translate"></span>
        </a>
      </li>
    </ul>
  </div>
</div>

所有变量都从transcluded范围继承，并且除了不可点击的锚点外，模板也会正确呈现，即使它们包含正确的信息。

我想要的是一种避免这种情况的方法。我可以使用$route提供程序通过点击锚点来解决这个问题，但由于这个组件应该被其他人使用，我宁愿一劳永逸地解决这个问题。

My Angular版本是1.5.4 我的JQuery版本是2.2.3

更新

似乎错误一些如何与此代码相关联如何将onClick处理程序两次附加到锚点。

var htmlAnchorDirective = valueFn({
  restrict: 'E',
  compile: function(element, attr) {
    if (!attr.href && !attr.xlinkHref) {
      return function(scope, element) {
        // If the linked element is not an anchor tag anymore, do nothing
        if (element[0].nodeName.toLowerCase() !== 'a') return;

        // SVGAElement does not use the href attribute, but rather the 'xlinkHref' attribute.
        var href = toString.call(element.prop('href')) === '[object SVGAnimatedString]' ?
                   'xlink:href' : 'href';
        element.on('click', function(event) {
          // if we have no href url, then don't navigate anywhere.
          if (!element.attr(href)) {
            event.preventDefault();
          }
        });
      };
    }
  }
});

单击链接时，单击处理程序将被触发两次。第一次element.attr（href）为true，第二次不是。这阻止了窗口的启动。

如果我第二次通过输入href来检查我是否正确重定向。

Answer 1

我已经解决了这个问题。问题是在编译的层次结构中有更高的位置，我的指令插入了父锚。我的更改没有触及这部分代码，因此很难调试。可以这样表示的结构。

<a id="parentWithoutHref">
  <directive>
    <...>
      <a id="theBrokenLink" href="url" />
    </...>
  </directive>
</a>

在传递第一个角度锚点指令检查后，事件正确气泡会发生什么，并在第二个没有href属性的标记处停止。通过使用span或div替换首先不应该是锚点的锚点，可以很容易地解决这个问题。

在angular指令中编译模板后，超链接不起作用

更新

1 个答案: