angular bootstrap ui tabs select option not working

Question

I have overriden angular ui tabs directive, the following is the plunker fro the same http://plnkr.co/edit/VABthzUwp50QpS16Gwuy?p=preview. Now my requirement is that when I select a tab, I need the callback function to be invoked. Hence I used the select attribute of the tab directive.

<tab title="Tab 1" select="alertMe()" template-url="tab1.html"  active='data.static1'></tab>

In my controller I have put an alert in my function, howeevr the function doesnt seem to get called.Here is the overriden directive.

    'use strict';

angular.module('ui.bootstrap.tabs', [])
.directive('tabset', function () {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    controller: function($scope) {
      $scope.templateUrl = '';
      var tabs = $scope.tabs = [];
      var controller = this;

      this.selectTab = function (tab) {
        angular.forEach(tabs, function (tab) {

          tab.selected = false;
        });
        tab.selected = true;
      };

      this.setTabTemplate = function (templateUrl) {
        $scope.templateUrl = templateUrl;
      }

      this.addTab = function (tab) {
        if (tabs.length == 0) {
          controller.selectTab(tab);
        }

        tabs.push(tab);

      };
    },
    template:
      '<div class="row-fluid">' +
        '<div class="row-fluid">' +
          '<div class="nav nav-tabs" ng-transclude></div>' +
        '</div>' +
        '<div class="row-fluid">' +
          '<ng-include src="templateUrl"></ng-include>' +
        '</div>' +
      '</div>'
  };
})
.directive('tab', ['$parse', function ($parse) {
  return {
    restrict: 'E',
    replace: true,
    require: '^tabset',
    scope: {
      title: '@',
      templateUrl: '@',
      onSelect: '&select'
      //active: '='
    },
    link: function(scope, element, attrs, tabsetController) {
    scope.$parent.$watch($parse(attrs.active), function (value) {

      if (value) {
        tabsetController.selectTab(scope);
      //   scope.onSelect();
      }

    });

      tabsetController.addTab(scope);

      scope.select = function () {
   alert()
        tabsetController.selectTab(scope);
       // scope.onSelect();
      }

      scope.$watch('selected', function () {

        if (scope.selected) {
          scope.onSelect();
          tabsetController.setTabTemplate(scope.templateUrl);
        }
      });

    },
    template:
      '<li ng-class="{active: selected}">' +
        '<a href="" ng-click="select()">{{ title }}</a>' +
      '</li>'
  };
}]);

Is there any way to call this callback method?

You have posted 13 questions on this site and several have viable answers yet you have not marked any of them as answered. Please take the time and mark your previous questions as answered where appropriate. — Rob J
– Rob J, Commented Jul 1, 2014 at 13:22

Rob J · Accepted Answer · 2014-07-01 16:11:27Z

1

In your Tab directive you need to set the callback function on the scope like so:

scope: {
  title: '@',
  templateUrl: '@',
  select: "&"
  //active: '='
},

See this plunkr for a working example: http://plnkr.co/edit/Q3GVxq5elw8aIgjQKMsQ?p=preview

answered Jul 1, 2014 at 16:11

Rob J

6,6295 gold badges30 silver badges30 bronze badges

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

1 Comment

coder Over a year ago

I tried with,however it does not seem to call my callback function.Is there anything else that needs to be done?

cuttlas · Accepted Answer · 2014-07-01 12:23:53Z

0

Shouldn't the function be called scope.alertMe() rather than scope.select()?

answered Jul 1, 2014 at 12:23

cuttlas

9816 silver badges17 bronze badges

Collectives™ on Stack Overflow

angular bootstrap ui tabs select option not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related