Angularjs :如何使用指令控制器处理click on ng-repeat？
我正在使用angular strap来显示一个3标签面板。我用tabbed-Panel指令包装了angular strap bs-tabs指令。我这样做是为了将来我可以用我的指令使整个选项卡式面板具有动画效果。显示正常。我不明白的是，如何使用我的指令处理选项卡(ng-repeat对象)上的单击。我在我的指令中有一个控制器，我用它来显示选项卡数据，但是我不知道如何让它处理选项卡点击(onTabClick)...is这是正确的方法，还是我应该使用链接(我在下面注释掉了)？
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;
}
}
};
});回答 1
Stack Overflow用户
发布于 2013-05-29 10:05:26
似乎发生的第一件事是，您丢失了angular-strap所需的bootstrap和jquery链接。
Angular strap被设计成利用bootstrap javascript，并围绕它包装事件代码，以一种角度的方式触发bootstrap调用。您似乎在angular-strap代码中遇到了一些问题，需要同时包含bootstrap 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调用。
从angular-strap bsTabs指令的编写方式来看，您将无法将单击事件传递给生成的a或它的父li标记(这是您需要它的地方，请参阅https://github.com/mgcrea/angular-strap/blob/master/src/directives/tab.js中的代码，第9和10行)。相反，你可以做的是观察选项卡激活的变化，并从那里触发你想要的功能。
https://stackoverflow.com/questions/16802058
复制相似问题
腾讯云开发者
