CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
coder
coder

Reputation: 95

angular bootstrap ui tabs select option not working

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?

Upvotes: 1

Views: 5474

Answers (2)

Rob J
Rob J

Reputation: 6629

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

Upvotes: 1

cuttlas
cuttlas

Reputation: 981

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

Upvotes: 0

Related Questions