CODEWITHSUNDEEP
angularjsasp.net-mvc-4asp.net-web-api
The Dumb Radish
The Dumb Radish

Reputation: 896

AngularJS ng-click not firing controller method

I'm sure everyone has seen questions of a similar ilk, and trust me when I say I have read all of them in trying to find an answer. But alas without success. So here goes.

With the below code, why can I not get an alert?

I have an ASP.Net MVC4 Web API application with AngularJS thrown in. I have pared down the code as much as I can.

I know that my AngularJS setup is working correctly because on loading my view it correctly gets (via a Web API call) and displays data from the database into a table (the GetAllRisks function). Given that the Edit button is within the controller, I shouldn't have any scope issues.

NB: the dir-paginate directive and controls are taken from Michael Bromley's excellent post here.

I would appreciate any thoughts as my day has degenerated into banging my head against my desk.

Thanks,

Ash

module.js

var app = angular.module("OpenBoxExtraModule", ["angularUtils.directives.dirPagination"]);

service.js

app.service('OpenBoxExtraService', function ($http) {
//Get All Risks
this.getAllRisks = function () {
    return $http.get("/api/RiskApi");
}});

controller.js

app.controller("RiskController", function ($scope, OpenBoxExtraService) {

//On load
GetAllRisks();

function GetAllRisks() {
    var promiseGet = OpenBoxExtraService.getAllRisks();
    promiseGet.then(function (pl) { $scope.Risks = pl.data },
        function (errorPl) {
            $log.error("Some error in getting risks.", errorPl);
        });
    }

$scope.ash = function () {
    alert("Bananarama!");}

});

Index.cshtml

@{
Layout = null;
}

<!DOCTYPE html>

<html ng-app="OpenBoxExtraModule">
<head>
    <title>Risks</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet">

<script type="text/javascript" src="~/Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="~/Scripts/angular.js"></script>

<script type="text/javascript" src="~/Scripts/AngularJS/Pagination/dirPagination.js"></script>

<script type="text/javascript" src="~/Scripts/AngularJS/module.js"></script>
<script type="text/javascript" src="~/Scripts/AngularJS/service.js"></script>
<script type="text/javascript" src="~/Scripts/AngularJS/controller.js"></script>

</head>
<body>


<div ng-controller="RiskController">
    <table>
        <thead>
        <tr>
            <th>Risk ID</th>
            <th>i3_n_omr</th>
            <th>i3_n_2_uwdata_key</th>
            <th>Risk Reference</th>
            <th>Pure Facultative</th>
            <th>Timestamp</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr dir-paginate="risk in Risks | itemsPerPage: 15">
            <td><span>{{risk.RiskID}}</span></td>
            <td><span>{{risk.i3_n_omr}}</span></td>
            <td><span>{{risk.i3_n_2_uwdata_key}}</span></td>
            <td><span>{{risk.RiskReference}}</span></td>
            <td><span>{{risk.PureFacultative}}</span></td>
            <td><span>{{risk.TimestampColumn}}</span></td>
            <td><input type="button" id="Edit" value="Edit" ng-click="ash()"/></td>
        </tr>
        </tbody>
    </table>
    <div>
        <div>
            <dir-pagination-controls boundary-links="true" template-url="~/Scripts/AngularJS/Pagination/dirPagination.tpl.html"></dir-pagination-controls>
        </div>
</div>
</div>
</body>
</html>

Upvotes: 0

Views: 1778

Answers (4)

The Dumb Radish
The Dumb Radish

Reputation: 896

Thank you all for your help, particularly @FrailWords and @Dalibar. Unbelievably, this was an issue of caching old versions of the javascript files. Doh!

Upvotes: 1

Dalibor
Dalibor

Reputation: 1572

I've got the working demo of your app, code (one-pager) is enclosed below, but here is the outline:

  • removed everything concerning dirPagination directive, replaced by ngRepeat
  • removed $log and replaced by console.log
  • since I don't have a Web API endpoint, I just populated $scope.Risks with some items on a rejected promise

Try adjusting your solution to first two items (of course, you won't populate it with demo data on rejected promise)

<!doctype html>
<html lang="en" ng-app="OpenBoxExtraModule">
<head>
  <meta charset="utf-8">
  <title></title>  
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("OpenBoxExtraModule", []);
app.service('OpenBoxExtraService', function ($http) {
    //Get All Risks
    this.getAllRisks = function () {
        return $http.get("/api/RiskApi");
    }      
});
app.controller("RiskController", function ($scope, OpenBoxExtraService) {
//On load
GetAllRisks();
function GetAllRisks() {
    var promiseGet = OpenBoxExtraService.getAllRisks();
    promiseGet.then(function (pl) { $scope.Risks = pl.data },
        function (errorPl) {
            console.log("Some error in getting risks.", errorPl);
            $scope.Risks = [{RiskID: "1", i3_n_omr: "a", i3_n_2_uwdata_key: "b", RiskReference: "c", PureFacultative:"d", TimestampColumn: "e"},      {RiskID: "2", i3_n_omr: "a", i3_n_2_uwdata_key: "b", RiskReference: "c", PureFacultative:"d", TimestampColumn: "e"},      {RiskID: "3", i3_n_omr: "a", i3_n_2_uwdata_key: "b", RiskReference: "c", PureFacultative:"d", TimestampColumn: "e"}      ];
        });
    }
$scope.ash = function () {
    alert("Bananarama!");}
});
</script>
</head>
<body>
<div ng-controller="RiskController">
    <table>
        <thead>
        <tr>
            <th>Risk ID</th>
            <th>i3_n_omr</th>
            <th>i3_n_2_uwdata_key</th>
            <th>Risk Reference</th>
            <th>Pure Facultative</th>
            <th>Timestamp</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="risk in Risks">
            <td><span>{{risk.RiskID}}</span></td>
            <td><span>{{risk.i3_n_omr}}</span></td>
            <td><span>{{risk.i3_n_2_uwdata_key}}</span></td>
            <td><span>{{risk.RiskReference}}</span></td>
            <td><span>{{risk.PureFacultative}}</span></td>
            <td><span>{{risk.TimestampColumn}}</span></td>
            <td><input type="button" id="Edit" value="Edit" ng-click="ash()"/></td>
        </tr>
        </tbody>
    </table>
    <div>
        <div></div>
</div>
</div>
</body>
</html>

Upvotes: 1

jshap
jshap

Reputation: 1

You can't directly use then on your service without resolving a promise inside it.

fiddle with fallback data

this.getAllRisks = function () {

    var d = $q.defer();

    $http.get('/api/RiskApi').then(function (data) {
        d.resolve(data);
    }, function (err) {
        d.reject('no_data');
    });

    return d.promise;

}

This will also fix your problem with getting alert to work.

Upvotes: 0

Alexandre
Alexandre

Reputation: 588

you cannot use ng-click attribute on input with angularjs : https://docs.angularjs.org/api/ng/directive/input.

use onFocus javascript event 

<input type="text" onfocus="myFunction()">

or try to surround your input with div or span and add ng-click on it.

Upvotes: 0

Related Questions