Angularjs : How to handle click on ng-repeat using a directive controller?

Question

I'm using angular strap to display a 3 tab panel. I wrap the angular strap bs-tabs directive with my tabbed-Panel directive. I do that so in the future I can animate the entire tabbed panel with my directive. It displays fine. What I cannot figure out, is how to handle clicks on tabs (ng-repeat objects) with my directive. I have a controller inside my directive and I use it to display the tab data but I can't figure out how to make it handle tab clicks (onTabClick)...is the this the right way to do it or should I use link (which I commented out below)?

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>

DIRECTIVE:

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

Looks good to me. [Here's your code in a plunk](http://plunker.co/edit/iOWOMOTNqwQ88IjTO1Nd?p=preview) — rGil, May 28 '13 at 22:48
@rGil your plunk is missing the angular strap tabs and I'm thinking that is what is causing my click event to be intercepted...I think that is what xmltechgeek is referring to below. — Mike6679, May 29 '13 at 14:33

score 2 · Accepted Answer · edited Dec 12 '13 at 08:25

The first thing that appears to be happening is that your missing the bootstrap and jquery links needed by angular-strap.

Angular strap is designed to utilize bootstrap javascript and wrap up the event code around that to trigger bootstrap calls in an angular way. You seem to be running into some points in the angular-strap code that needs both the bootstrap js and the jquery js to be included.

<!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>

And the script file:

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

Working plunk with this version at http://plnkr.co/edit/4hss3FHKMSc8st56BRTJ?p=preview

Edit: I've modified my plnkr to properly watch tab change and tab changes in the tabs.activeTab. I also removed the extraneous ng-click (see explanation below) and fixed the ng-model call.

From the way the angular-strap bsTabs directive is written you won't be able to pass a click event to the generated a or it's parent li tags (which is where you would need it, see the code at https://github.com/mgcrea/angular-strap/blob/master/src/directives/tab.js, lines 9 and 10). Instead what you can do is watch for changes to tab activations and trigger your desired functionality from there.

That is definitely works and is a nice Solution. I think though I'm going to switch to ui bootstrap for my custom directives. This way I don't have to include jquery and I can use my existing controller to handle click events (after I wrap the tab content in a span). See: https://github.com/angular-ui/bootstrap/issues/179 — Mike6679, May 29 '13 at 15:41
Ya, I've been back and forth between the two as well but I like the organization of the angular-ui team a lot so I tend to lean that way, however angular-strap has some nice clean UI look and feel... — Paul Ryan, May 29 '13 at 15:44
The solution referenced at github.com/angular-ui/bootstrap/issues/179 will only work for clicking content and not the tabs themselves. If you want a click handler for tabs use the answer provided by xmltechgeek. — Mike6679, May 29 '13 at 16:00
Also if you are using bootstrap UI you can use the methods described here : http://stackoverflow.com/questions/15685360/how-to-tell-which-bootstrap-tab-is-selected-in-angular-ui to handle tab click events — Mike6679, May 29 '13 at 18:53

Angularjs : How to handle click on ng-repeat using a directive controller?

1 Answers1