Question

我确信每个人都看到了类似的问题，并且当我说我已经阅读了所有这些问题以试图找到答案时，请相信我。但唉，没有成功。所以这里。

使用以下代码，为什么我不能收到警报？

我有一个带有AngularJS的ASP.Net MVC4 Web API应用程序。我尽可能地减少了代码。

我知道我的AngularJS设置工作正常，因为在加载我的视图时它正确获取（通过Web API调用）并将数据库中的数据显示到表中（GetAllRisks函数）。鉴于编辑按钮位于控制器内，我不应该有任何范围问题。

注意：dir-paginate指令和控件取自Michael Bromley的优秀帖子here。

我很感激任何想法，因为我的日子已经堕落到我的桌子上。“

谢谢，

灰

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>

Answer 1

你不能在angularjs：https://docs.angularjs.org/api/ng/directive/input的输入上使用ng-click属性。

使用onFocus javascript事件

PROC SQL DELETE

或尝试用div或span包围您的输入并添加ng-click。

Answer 2

我有你的应用程序的工作演示，代码（one-pager）包含在下面，但这里是大纲：

删除了有关dirPagination指令的所有内容，替换为ngRepeat
删除了$ log并替换为console.log
因为我没有Web API端点，所以我只填充$ scope.Risks，其中包含一些拒绝承诺的项目

尝试将您的解决方案调整为前两项（当然，您不会使用拒绝承诺的演示数据填充它）

<!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>

Answer 3

谢谢大家的帮助，特别是@FrailWords和@Dalibar。令人难以置信的是，这是缓存旧版本javascript文件的问题。卫生署！

Answer 4

如果不解决其中的承诺，则无法直接使用您的服务。

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;

}

这也将解决您获得工作警报的问题。

AngularJS ng-click不触发控制器方法

4 个答案: