angular-ui bootstrap tab select function on click

Question

Am trying to call an expression function on tab select using angular ui bootstrap, however the expression is not being called but checking on angular inspector the function /expression exists : below is my code work:

NB : Other tabs function correctly

Angular View

<uib-tab ng-click="vm.alertMe" select="" heading="New Invoice">
                          .....
 </uib-tab>

controller used as vm

vm.alertMe = alertMe;

 function alertMe() {
            setTimeout(function() {
              $window.alert('You\'ve selected the alert tab!');
            });
          }

Please don't edit answers into your questions. If you have an answer, post it below and mark it accepted. — user229044
– user229044 ♦, Commented Dec 15, 2015 at 17:38

jusopi · Accepted Answer · 2015-12-15 17:52:13Z

5

You're not calling the function in your DOM.

instead of this:

<uib-tab ng-click="vm.alertMe" select="" heading="New Invoice">

you should be calling it like this:

<uib-tab ng-click="vm.alertMe()" select="" heading="New Invoice">

answered Dec 15, 2015 at 17:52

jusopi

6,8133 gold badges37 silver badges44 bronze badges

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

1 Comment

Jimmy Obonyo Abor Over a year ago

Please refer to above stackoverflow.com/a/34246855/1226748: i was not calling $window service

LeOn - Han Li · Accepted Answer · 2015-12-13 00:59:16Z

0

Why not define the alertMe function directly on the vm. I can not see your whole code. I assume it should work if you vm is correctly assigned as this in the controller. Also make sure in the html, your controller is correctly defined. Let me know :)

vm.alertMe = function() {
              setTimeout(function() {
               $window.alert('You\'ve selected the alert tab!');
              });
             }

answered Dec 13, 2015 at 0:59

LeOn - Han Li

10.4k2 gold badges70 silver badges63 bronze badges

3 Comments

Jimmy Obonyo Abor Over a year ago

I resolved this : I was not calling the $window service to the controller

LeOn - Han Li Over a year ago

Oh, you mean you forget to inject that ?

Jimmy Obonyo Abor Over a year ago

Oh yes kinda in a hurry to finish he app !

Jimmy Obonyo Abor · Accepted Answer · 2015-12-15 17:55:06Z

0

Always inject the base service names you use in your angular app ,in the above example i was not calling : $window service which resulted in the bug / error .my final controller is as following :

function() {

    'use strict';

    angular
        .module('app.patients')
        .controller('PatientsController', PatientsController);

    PatientsController.$inject = ['$http','$window'];
    /* @nginject */
    function PatientsController($http, $window) { 
       vm.alertMe = function() {

             $window.alert('You\'ve selected the alert tab!');
           }
     }
}

and the view ,

<uib-tab  select="vm.alertMe()" heading="New Invoice">
                          .....
 </uib-tab>

answered Dec 15, 2015 at 17:55

Jimmy Obonyo Abor

7,92510 gold badges48 silver badges72 bronze badges

Collectives™ on Stack Overflow

angular-ui bootstrap tab select function on click

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related