current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 0 down vote favorite

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>
share|improve this question
1  
how about changing input type to button and then fire ng-click?? – roxid 42 mins ago
    
It is a button. – The Dumb Radish 20 mins ago

2 Answers 2

up vote 0 down vote

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.

share|improve this answer
    
I can't use ng-click on an input type of button? Are you sure about that? – The Dumb Radish 18 mins ago
    
Input type of button doesn't exist. I think you meen input type submit and it doesn't appear in angular js documentation. doesn't use input type submit, prefer button element – Alexandre 11 mins ago
    
I refer you to this w3schools.com/tags/att_input_type.asp – The Dumb Radish 3 mins ago
    
It wouldn't hurt to just change it to a button tag and see if that helps. – Amy Blankenship 1 min ago
up vote 0 down vote

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.

share|improve this answer
    
Can you explain this a bit further please? I'm not sure I follow what you have done. At the moment the "ash" function doesn't use my service. – The Dumb Radish 17 mins ago
1  
$http itself will resolve or reject the promise, and .get returns a promise. You don't have to manually do it. – Amy Blankenship 10 mins ago
    
So I just need the defer? – The Dumb Radish 3 mins ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.