javascript - AngularJS - 将点击事件绑定(bind)到元素

Question

我将以下部分插入到 ng-view 中。我只粘贴相关部分的部分。

<tr ng-repeat="group in groups">
    <td><a href="" class="restaurant-group-edit" create-link>{{ group.name }}</a></td>
    <td>{{ group.members.length }}</td>
    <td>{{ 5 }}</td>
    <td style="text-align: right">
    <span class="pseudo-select enhanced-select ps-settings">
        <select class="enhanced-select ps-settings restaurant-group-select" restaurant_group_id="1">
            <option value="actions">Actions</option>
            <option value="edit">Edit</option>
            <option value="edit">Restaurants</option>
            <option value="delete">Menus</option>
            <option value="edit">Delete</option>
        </select>
        <span class="es-label">Actions</span>
        <span class="icon"></span>
    </span>
    </td>
</tr>

我想将点击事件绑定(bind)到上面的每个 anchor 元素。我已经使用名为 create-link 的自定义指令尝试过此操作。在我的 app.js 文件中，我有以下代码。

adminApp.directive("create-link", function($location, $timeout, $rootScope) {
    console.log("I fired the directive!");
    return {
        restrict: "A",
        link: function(scope, element) {
            $timeout(function(){
                element.on("click", function(e) {
                    console.log("Clicked!");
                });
            });
        }
    };
});

但是，事件永远不会绑定(bind)。事实上，“我解雇了指令!”实际上从未被写入控制台。我在这里缺少什么？将事件绑定(bind)到加载 View 时创建的 DOM 元素似乎是一个常见的用例。当然有一种简单的方法可以做到这一点。

感谢您的帮助。

安德鲁

Answer 1

将 js 中的指令名称更改为 View 部分中声明的指令名称的驼峰版本:

adminApp.directive("createLink", function($location, $timeout, $rootScope) {
    console.log("I fired the directive!");
    return {
        restrict: "A",
        link: function(scope, element) {
            $timeout(function(){
                element.on("click", function(e) {
                    console.log("Clicked!");
                });
            });
        }
    };
});