问题

Question

我仍然是棱角分明的新手，并试图掌握指令。我有一个特殊的用例，有点难以解释，但我已经做了一个非常基本的演示，它需要做什么。

基本上，有一个父对象将包含任意数量的图层和标记。出于特定原因，我需要能够忽略此图层中出现的任何类型的鼠标点击，除非点击链接。

问题

这可以重写为简单的属性指令吗？

jsBin

这是一个有效的 jsBin 来展示我目前是如何实现我的结果的。我希望通过将其转换为自定义指令来简化它。

详细

当我说需要忽略点击次数时，我的意思是他们非常明确地需要被覆盖才能被忽略。这是不需要将ng-click附加到<a>标记的情况。原因是因为触发鼠标点击时内容将消失。我希望用户能够与内容进行交互（突出显示，选择，复制等），而不会无意中消失。

我的工作就像我想要的那样，但我想更进一步。现在，我必须将其作为ng-click添加，就像这样;

<div ng-click="checkIfLink($event)">
   <div> // ... some html content ... // </div>
   <div> // ... some html content ... // </div>
   <div> <a href="#link">Hyperlink</a> </div>
</div>

这有效，但我想尝试更多的指令，看看我是否可以使这更具说明性。理想情况下，我希望将其简化为简单的......

<div ignore-clicks>
   <div> // ... some html content ... // </div>
   <div> // ... some html content ... // </div>
   <div> <a href="#link">Hyperlink</a> </div>
</div>

这显然是一个非常简单的例子，我有一个 jsBin 起草，以演示代码现在如何工作。在我的示例中，如果您单击不应让鼠标单击通过的框的一部分，它将只更改框的背景颜色。如果单击该链接，它将正常运行。

app.js

(function(){
  var app = angular.module("app", []);
  app.controller("DemoController", function($scope){
    $scope.checkIfLink = function($event){
      if($event.target.tagName !== 'A'){
        $event.preventDefault();
        $event.stopPropagation();

        // change the background color just as part of the demo
        $event.target.style.background = $scope.getRandomColor();
      }
    }

    $scope.getRandomColor = function(){
      var hex = Math.floor(Math.random() * 0xFFFFFF);
      return '#' + ("000000" + hex.toString(16)).substr(-6);
    }
  });
})();

的index.html

<body ng-app="app">
  <div ng-controller="DemoController">
    <div id="square" ng-click="checkIfLink($event)">
      <a href="#test">Test</a>
    </div>
  </div>
</body>

Answer 1

您可以使用link函数将事件侦听器附加到元素。

app.directive('ignoreClicks', function(){
    return {
      link: function(scope, element, attrs) {
        element.on('click', function(evt) {
          if(evt.target.tagName !== 'A'){
            evt.preventDefault();
            evt.stopPropagation();
          }
          else {
            console.log('click');
          }
        });
      }
    };
  });

angularjs - 具有自动＆＃34;参数＆＃34;的自定义指令;

问题

jsBin

详细

app.js

的index.html

1 个答案: