AngularJS ng-click is not working

Question

I am trying to implement a small project in Angular JS and im stuck trying to call a function on ng-click which doesn't work however initial load is fine..what i want is to be able to recall the ajax with params which i have tested and works but can't call the function via the ng-click.

i am using asp.net mvc5 and angularjs,

Index.chtml:

@{
    ViewBag.Title = "Main";
}

<div class="wrapper wrapper-content" ng-app="mainModule" ng-controller="mainController">

    <div class="row">
        <div class="form-group col-lg-3 col-sm-6">
            <button type="submit" class="btn btn-warning" ng-click="getObject()">Apply</button>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-3 col-sm-6">
            <div>@Html.Partial("_Booking")</div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div>@Html.Partial("_Commission")</div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div>@Html.Partial("_Discount")</div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div>@Html.Partial("_Revenue")</div>
        </div>
    </div>

</div>

@section Scripts {

    @Scripts.Render("~/scripts/main")

}

main.js

var mainModule = angular.module("mainModule", []);

mainModule.controller("mainController", [
       "$scope", "mainFactory", function ($scope, mainFactory) {
           $scope.returnedObject = {};
           mainFactory.getObject()
               .then(function (response) {
                   $scope.returnedObject = response.data;
                   console.log(response.data);
               }, function (error) {
                   console.error(error);
               });
       }
]);

mainModule.factory("mainFactory", function ($q, $http) {
    return {
        getObject: function () {
            var deferred = $q.defer(),
                httpPromise = $http({ method: "GET", url: "/Main/BookingData" });

            httpPromise.then(function (response) {
                deferred.resolve(response);
            }, function (error) {
                console.error(error);
            });

            return deferred.promise;
        }
    };
});

Christopher Marshall · Accepted Answer · 2016-03-25 18:07:10Z

1

HTML should change to the following as it's not a form submission.

<button type="button" class="btn btn-warning" ng-click="getObject()">

You need to bind getObject function in your controller. It should be:

    $scope.getObject = function () {
              mainFactory.getObject()
                   .then(function (response) {
                       $scope.returnedObject = response.data;
                       console.log(response.data);
                   }, function (error) {
                       console.error(error);
                   });
    };


    // Run on load
    $scope.getObject();

edited Mar 25, 2016 at 18:07

answered Mar 25, 2016 at 17:52

Christopher Marshall

10.7k10 gold badges57 silver badges95 bronze badges

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

1 Comment

Jia Wei Over a year ago

Hey this worked!!, however it doesn't initiate on load? how can i solve this?, as previously it worked on load aswell..

Collectives™ on Stack Overflow

AngularJS ng-click is not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related