Question

我试图抓住所有锚点击并玩href's。所以我写了以下指令

app.directive('a', function() {
        return {
            restrict: 'E',
            link: function(scope, elem, attrs) {
                if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
                    elem.on('click', function(e){
                        alert(attrs.href);
                        e.preventDefault();
                    });
                }
            }
        };
    })

我试过在我的app.js以及MyCtrl.js文件中给出这个。我的模块声明在myCtrl.js中是这样的：

var AppControllers = angular.module('starter.controllers');
AppControllers

它在另一个离子项目中工作。不知道我哪里错了。有人能帮助我吗？

Answer 1

阅读评论后更新的答案

您可以覆盖a指令。但是你必须确保覆盖默认行为以防止angularjs覆盖了锚点选项卡点击处理程序。

app.directive('a', function() {
  return {
    restrict: 'E',
    scope: true,
    compile: function(element, attr) {
      element.bind('click', function(event) {
        alert('clicked on link: ' + attr.href)
        event.preventDefault(); // IMPORTANT
      });
    }
  }
});

同样在尝试绑定到html时，您可能需要确保编译它以确保您的锚标记指令启动。有一个指令可以为您执行此操作：

app.directive('bindHtmlCompile', ['$compile', function($compile) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      scope.$watch(function() {
        return scope.$eval(attrs.bindHtmlCompile);
      }, function(value) {
        element.html(value);
        $compile(element.contents())(scope);
      });
    }
  };
}]);

来源：https://stackoverflow.com/a/29994559/841804

因此，您可以使用ng-bind-html代替bind-html-compile，而不是<span bind-html-compile="getHtml()"></span>：

fieldset { font-size: 20px;}
label:hover , input:hover { font-size: 25px;}

最后，这是一个能够做到这一点的人：http://plnkr.co/edit/efJw8f40gYIaXo5Bdv44?p=preview

angular指令编译/链接未被调用

1 个答案: