標籤指令不能正常工作

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>