标签指令不能正常工作

Question

这里是我的html：

<ul id="tabs" class="nav"> 
      <li class="active"> 
       <a href="#tab1" tabsMenu>Overview</a> 
      </li> 
      <li> 
       <a href="#tab2" tabsMenu>Prospect</a> 
      </li> 
      <li> 
       <a href="#tab3" tabsMenu >Account</a> 
      </li> 
      <li> 
       <a href="#tab5" tabsMenu >Script</a> 
      </li> 
      <li> 
       <a href="#tab4" tabsMenu >Notes</a> 
      </li> 
      <li> 
       <a href="#tab5" tabsMenu >History</a> 
      </li> 
     </ul> 

这里是我的tabsMenu指令：

angular.module('directives.tabsMenu', []) 

.directive('tabsMenu', function() { 
    return { 
     // Restrict it to be an attribute in this case 
     restrict: 'A', 
     // responsible for registering DOM listeners as well as updating the DOM 
     link: function(scope, element, attrs) { 

      element.bind('click', function(e) { 
       console.log('clicked'); 
       e.preventDefault(); 
       $(this).tab('show'); 
      }); 
     } 
    }; 
}); 

click事件的断点不打......

的正常的jquery代码有哪些作品：

$('#tabs a').click(function (e) { 
     e.preventDefault(); 
     $(this).tab('show'); 
     }); 

我想删除jquery代码并使用指令，但它不工作，请帮助或建议它为什么不工作..

Answer 1

tabsMenu不是在HTML中指定指令的有效方式。

AngularJS在标准化期间查找小写字母短划线或下划线分隔的和可选的x或数据前缀属性名称，以确定哪些元素匹配哪些指令。

尝试的tabs-menu代替tabsMenu：

<a href="#tab1" tabs-menu>Overview</a>