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

@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
– Mike6679, Commented May 29, 2013 at 14:33

arunkjn · Accepted Answer · 2013-12-12 08:25:09Z

2

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.

edited Dec 12, 2013 at 8:25

arunkjn

5,9895 gold badges24 silver badges31 bronze badges

answered May 29, 2013 at 2:05

Paul Ryan

1,51912 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mike6679 Over a year ago

hmmm ok, so how can I get the click event then?

Mike6679 Over a year ago

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: github.com/angular-ui/bootstrap/issues/179

Paul Ryan Over a year ago

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

Mike6679 Over a year ago

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 Over a year ago

Also if you are using bootstrap UI you can use the methods described here : stackoverflow.com/questions/15685360/… to handle tab click events

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related