Angularjs：如何处理使用指令控制器点击ng-repeat？

我使用角度带显示3个选项卡面板。我用我的tabbed-Panel指令来包裹角度带bs-tabs指令。我这样做将来我可以用我的指令为整个标签面板制作动画。它显示正常。我无法弄清楚的是，如何使用我的指令来处理制表符（ng-repeat对象）上的点击。我在我的指令中有一个控制器，我用它来显示标签数据，但我无法弄清楚如何使它处理标签点击（onTabClick）...这是正确的方式来做到这一点，或者我应该使用链接（我在下面注释）？Angularjs：如何处理使用指令控制器点击ng-repeat？

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    </head> 
    <body> 
    <tabbed-Panel class="bottomTabPanel"> 
     <div data-fade="1" ngModel="activeTab" bs-Tabs> 
     <div ng-repeat="tab in tabs" data-title="{{tab.title}}"> 
      <p ng-click="onTabClick(tab)">{{tab.content}}</p> 
     </div> 
     </div> 
    </tabbed-Panel> 
    </body> 
</html>

指令：

angular.module('directives', ['opsimut','$strap.directives']) 
    .directive('tabbedPanel',function() { 
    return { 
     restrict:"E", 

     controller: function($scope) {  
     $scope.tabs = [ 
      {title:'Question 1', content: 'Question 1 content here'}, 
      {title:'Question 2', content: 'Question 2 content here'}, 
      {title:'Indication', content: 'Indication content here'} 
     ]; 

     $scope.tabs.activeTab = 2; 

     $scope.onTabClick = function(tab) { 
      debugger; 
     }        
     } 
    }; 
});

来源

2013-05-28 Mike6679

我看不错。 [这是你的代码在普拉克（http://plunker.co/edit/iOWOMOTNqwQ88IjTO1Nd?p=preview） – rGil

@rGil您普拉克缺少角带拉，我在想，是什么原因造成我的点击事件被截获......我认为这就是xmltechgeek下面提到的。 – Mike6679

，似乎是发生的第一件事情是，你缺失的角带所需的引导和jQuery链接。

角带被设计为利用自举JavaScript和包裹所述事件代码围绕触发以成角度的方式引导电话。你似乎在角度代码中遇到了一些需要包括引导程序js和jquery js的代码。

<!DOCTYPE html> 

<html> 

    <head> 
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet"> 
    <link href="//mgcrea.github.com/angular-strap/css/prettify.css" rel="stylesheet"> 

    <!-- required libraries --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> 
    <script src="//mgcrea.github.com/angular-strap/js/angular-strap.js"></script> 

    <script src="script.js"></script> 
    </head> 

    <body ng-app="directives"> 

    <tabbed-Panel class="bottomTabPanel"> 
     <div data-fade="1" ng-model="tabs.activeTab" bs-Tabs> 
     <div ng-repeat="tab in tabs" data-title="{{tab.title}}"> 
      <p>{{tab.content}}</p> 
     </div> 
     </div> 
     <pre> 
     {{tabActivations | json}} 
     </pre> 
    </tabbed-Panel> 
    </body> 

</html>

和脚本文件：

angular.module('directives', ['$strap.directives']) 
    .directive('tabbedPanel',function() { 
    return { 
     restrict:"E", 

     controller: function($scope) {  
     $scope.tabs = [ 
      {title:'Question 1', content: 'Question 1 content here'}, 
      {title:'Question 2', content: 'Question 2 content here'}, 
      {title:'Indication', content: 'Indication content here'} 
     ]; 

     $scope.tabs.activeTab = 1; 

     $scope.tabActivations = []; 

     $scope.$watch('tabs.activeTab', function(){ 
      $scope.tabActivations.push('watch activated for tab ' + $scope.tabs.activeTab); 
     }); 
     } 
    }; 
});

工作与此版本花掉在http://plnkr.co/edit/4hss3FHKMSc8st56BRTJ?p=preview

编辑：我修改我的plnkr正常观看的标签变化和标签的变化tabs.activeTab。我还删除了无关的ng-click（请参阅下面的解释）并修正了ng-model调用。

从角度绑定bsTabs指令的编写方式，您将无法将单击事件传递给生成的a或其父项li标记（这是您需要它的地方，请参阅代码https://github.com/mgcrea/angular-strap/blob/master/src/directives/tab.js，第9和10行）。相反，你可以做的是观察标签激活的变化，并从那里触发你想要的功能。

来源

2013-05-29 02:05:25

嗯，好吧，那我该如何获得点击事件呢？ – Mike6679

这绝对有效，是一个不错的解决方案。我认为虽然我将切换到自定义指令的ui bootstrap。这样我就不必包含jquery，而且我可以使用现有的控制器来处理点击事件（在将标签内容包装在一个范围中之后）。请参阅：https://github.com/angular-ui/bootstrap/issues/179 – Mike6679

雅，我已经来回在两者之间很好，但我喜欢的角UI团队的组织很多，所以我倾向于瘦呀，但是角背带有一些漂亮干净的用户界面的外观和感觉... –

Angularjs：如何处理使用指令控制器点击ng-repeat？

回答

相关问题