1

我正在使用角带来显示 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;
        }                            
      }
    };
});
4

1 回答 1

2

似乎发生的第一件事是您缺少 angular-strap 所需的引导程序和 jquery 链接。

Angular strap 旨在利用 bootstrap javascript 并将事件代码包装在其周围，以以角度方式触发 bootstrap 调用。您似乎在需要同时包含引导 js 和 jquery js 的 angular-strap 代码中遇到了一些问题。

<!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 行）。相反，您可以做的是观察选项卡激活的更改并从那里触发您想要的功能。

于 2013-05-29T02:05:25.943 回答