Question

我正在使用角带来显示3个标签面板。我使用tabbed-Panel指令包装angular strap bs-tabs指令。我这样做，以后我可以用我的指令动画整个标签面板。它显示很好。我无法弄清楚的是，如何使用我的指令处理选项卡（ng-repeat对象）的点击。我的指令中有一个控制器，我用它来显示标签数据，但我无法弄清楚如何使它处理标签点击（onTabClick）...这是正确的方法，或者我应该使用链接（我在下面评论过）？

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

Answer 1

似乎发生的第一件事是你错过了angular-strap所需的bootstrap和jquery链接。

Angular strap旨在利用bootstrap javascript并将事件代码包装在其周围，以有角度的方式触发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指令的方式来看，您将无法将click事件传递给生成的a或它的父li标签（这是您需要它的地方，请参阅{{3处的代码第9行和第10行）。相反，你可以做的是观察标签激活的变化并从那里触发你想要的功能。

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

1 个答案: