AngularJS - 将单击事件绑定到元素

Question

我将以下部分插入到ng视图中。我只是在粘贴部分相关的部分。

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

我想将一个click事件绑定到上面的每个锚元素。我用一个名为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!"); 
       }); 
      }); 
     } 
    }; 
}); 

但是，事件永远不会受到约束。事实上，“我解雇了这个指令！”永远不会写入控制台。我在这里错过了什么？绑定事件到加载视图时创建的DOM元素似乎是一个常见的用例。当然，要做到这一点很简单。

感谢您的任何帮助。

安德鲁

Answer 1

更改指令名JS在视图部分中声明你的指令名的版本驼峰：

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