Function not getting called using ng-click

Question

Inside the controller I have a login() function which should be called using ng-click like this:

<body ng-app="angularoauthexampleApp">
    <div class="social-buttons">
        <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a>
        <a href="#" class="btn btn-google"><i class="fa fa-google" ng-click="login()"></i> Google</a>
    </div>
</body>

MainJS:

angular.module('angularoauthexampleApp', [
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
])
.config(function ($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
    })
    .when('/afterlogin', {
        templateUrl: 'views/afterlogin.html',
        controller: 'AboutCtrl'
    })
    .when('/access_token=:accessToken', {
        template: '',
        controller: function ($location, $rootScope) {
            var hash = $location.path().substr(1);

            var splitted = hash.split('&');
            var params = {};

            for (var i = 0; i < splitted.length; i++) {
                var param = splitted[i].split('=');
                var key = param[0];
                var value = param[1];
                params[key] = value;
                $rootScope.accesstoken = params;
            }
            $location.path("/afterlogin");
        }
    })
    .otherwise({
        redirectTo: '/'
    });
});

Controller:

angular.module('angularoauthexampleApp')
  .controller('MainCtrl', ['$scope', function ($scope) {

    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
    $scope.login=function() {
                  alert("main");
        var client_id="343625411797-hcm0impil8l1mughb8ma2jj966um05bp.apps.googleusercontent.com";
        var scope="email";
        var redirect_uri="http://localhost:9046/RTH_Sample4/app/";
        var response_type="token";
        var url="https://accounts.google.com/o/oauth2/auth?scope="+scope+"&client_id="+client_id+"&redirect_uri="+redirect_uri+
        "&response_type="+response_type;
        window.location.replace(url);
    };
}]);

Nothing happens when I click the button on the form or event is not getting fired. I can't see anything wrong with code but some how its not working

Can you confirm that you've loaded all the dependencies for your project, including scripts for ngCookies, ngResource, ngRoute, ngSanitize, ngTouch? I'd make sure there are no errors in the console first. — Merott
– Merott, Commented Dec 16, 2015 at 15:37
@Merott Here is the fiddle: jsbin.com/halosulepu/edit?html,output — kittu
– kittu, Commented Dec 16, 2015 at 16:07

koox00 · Accepted Answer · 2015-12-17 08:11:33Z

1

MainCtrl gets loaded inside the views/main.html

.when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
})

this has to be loaded inside a ng-view directive in your root html. Inside that html you can use the login().

Another way is to directly use the controller in the root html:

<body ng-app="angularoauthexampleApp">
    <div class="social-buttons" ng-controller="MainCtrl">
        <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a>
        <a href="#" class="btn btn-google"><i class="fa fa-google" ng-click="login()"></i> Google</a>
    </div>
</body>

Also, you have attached ng-click to the i element so you have to click the G icon for login() to work. Move it to the a element and you should be ok.

edited Dec 17, 2015 at 8:11

answered Dec 16, 2015 at 15:37

koox00

2,7212 gold badges20 silver badges28 bronze badges

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

4 Comments

kittu Over a year ago

I understood the second part but I didn't understand the ui-view directive??

kittu Over a year ago

I tried the second way but still login function is not called

Merott Over a year ago

ui-view is for angular-ui-router, not used by the OP.

koox00 Over a year ago

Sorry ng-view. The router loads the html and the controller for you inside the ng-view directive so when you change state the appropriate controller and view gets loaded.

Collectives™ on Stack Overflow

Function not getting called using ng-click

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related