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

Question

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

<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
});

Answer 1

您实际上并不想处理控制器中的任何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. -->