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. -->