angular.js-处理控制器内部点击的最简单方法

angular.js - simplest way to handle click inside controller

本文关键字：最简单 方法 内部 js- 处理 控制器 angular      更新时间：2023-09-26

在控制器内部有比这更好的处理点击的方法吗？

<div ng-controller="SomeController>
  <a href="/#!/something" ng-click="doTheSame()">link1</a>
  <a href="/#!/something" ng-click="doTheSame()">link2</a>
  <a href="/#!/something" ng-click="doTheSame()">link3</a>
  ..
  <a href="/#!/something" ng-click="doTheSame()">link99</a>
</div>

在jQuery中，我会做一些类似的事情：

$('div > a').on('click', function() {
  // do some stuff
});

您实际上并不想处理控制器中的任何DOM内容（控制器只是将数据绑定到视图，而视图恰好是DOM）。

您希望使用指令进行DOM操作。（但是，是的，ng-click是一个内置指令，可以在控制器内运行方法）。

如果你想把一些行为附加到一个元素上，你可以这样做：

myApp.directive('myDirective', myDirective);
myDirective.$inject = ['whateverService'];
function myDirective(whateverService) {
    var d = {
        restrict: 'A',
        link: link
    };
    return d;
    function link(scope, $el, attrs) {
        $el.on('click', doSomething);
        function doSomething() { /* ... */ }
    }
}

HTML:

<div myDirective></div>

有关更多信息，请参阅John Papa的风格指南。

您可以有多个这样的指令，甚至可以传入数据：

<div myDirective="first-link">First</div>
<div myDirective="second-link">Second</div>
<!-- etc. -->
相关文章：