CODEWITHSUNDEEP
angularjs
kittu
kittu

Reputation: 7008

Function not getting called using ng-click

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

Upvotes: 1

Views: 601

Answers (1)

koox00
koox00

Reputation: 2731

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.

Upvotes: 1

Related Questions