如何在我的情況下向元素添加點擊事件？

Question

我有一個類似以下的指令

var app = angular.module('app', ['ui.bootstrap', '']);

app.directive('myNav', function () {
    return {
        restrict: 'E',
        templateUrl: "directives/directive-test.html",
        replace: true,
        link: function (scope, element, attrs) {
            //I want to add click event listen to li element
               element.on('mousedown', function(){
                    alert('test') //works on all ul but not individual li
                })
        }
    };
})

指令-test.html

<ul>
    <li class='nav-btn' ng-click='open()'>
        //contents
    </li>
    <li class='nav-btn' ng-click='open()'>
        //contents
    </li>
    <li class='nav-btn' ng-click='open()'>
        //contents
    </li>
</ul>

我不確定如何找到li元素並在指令內分配click事件。

有人可以幫我嗎？ 謝謝。

Answer 1

如果您嘗試創建類似於手風琴菜單的內容，請查看ui-bootstrap http://angular-ui.github.io/bootstrap/#/accordion 。

如果不是，為什么不只給open（）提供一個參數，以便知道單擊了哪個元素（如果需要ng-repeat，則可以使用$ index）。

<ul>
    <li class='nav-btn' ng-click='open(0)'>
        //contents
    </li>
    <li class='nav-btn' ng-click='open(1)'>
        //contents
    </li>
    <li class='nav-btn' ng-click='open(2)'>
        //contents
    </li>
</ul>

現在scope.open將知道單擊了哪個元素。 或使用ng-repeat：

<ul>
    <li class="nav-btn" ng-repeat="el in navElems" ng-click="open($index)">
        {{el.contents}}
    </li>
</ul>

其中navElems將是對象數組，例如：

scope.navElems = [
  { contents: "link1" },
  { contents: "link2" },
  { contents: "link3" }
];

還有一個示例打開功能：

scope.open = function(index) {
  var el = navElems[index];
  // do stuff with el
};

Answer 2

您應該能夠做到這一點

var app = angular.module('app', ['ui.bootstrap', '']);

app.directive('myNav', function () {
    return {
        restrict: 'E',
        templateUrl: 'directives/directive-test.html',
        replace: true,
        link: function (scope, element, attrs) {
            element.find('li').on('mousedown', function(){
                alert('test') 
             });
        }
    };
})