angularjs data-ng click-not firing

时间:2016-08-03 20:04:04

标签: angularjs asp.net-mvc asp.net-web-api

我正在关注此tutorial,我能够创建工作清单。当我尝试添加新产品功能时,我遇到了无法触发data-ng-click事件的问题。我检查过,如果我在按钮value="{{testing}}"中使用,则会填充预期值。但我没有在控制台中看到任何应该出现的消息。以下是我项目中的文件:

Index.cshtml

@{
    ViewBag.Title = "SPA";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<div>
    <div>
        <div>
            <table cellpadding="5" cellspacing="6" width="100%" style="background-color:whitesmoke; border:solid 4px green;">
                <tr>
                    <td style="border: solid 1px gray; width:170px; text-align:center;"><a href="/#/showproducts"> Show All Products </a></td>
                    <td style="border: solid 1px gray; width:170px; text-align:center;"><a href="/#/addproduct"> Add New Product </a></td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div>
            <div data-ng-view></div>
        </div>
    </div>
</div>


@section scripts{
<script type="text/javascript" src="@Url.Content("~/Scripts/angular.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/angular-route.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/MyScripts/Module.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/MyScripts/Services.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/MyScripts/ShowProductsController.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/MyScripts/AddProductController.js")"></script>
} 

ShowAllProducts.cshtml

<table><tr><td height="10px"></td></tr></table>
<table cellpadding="4" cellspacing="4" width="90%" align="center"
   style="background-color: skyblue; border:solid 2px red; padding-top:20px;">
<thead>
    <tr style="background-color:#F5F5F5;">
        <th>Name</th>
        <th>Price</th>
    </tr>
</thead>
<tbody>
    <tr data-ng-repeat="prod in Products">
        <td>{{prod.name}}</td>
        <td>{{prod.price}}</td>
        <td><a ng-click="editProduct(prod.name)">Edit</a></td>
        <td><a ng-click="deleteProduct(prod.name)">Delete</a></td>
    </tr>
</tbody>

AddProduct.cshtml

@{
    ViewBag.Title = "Add New Student";
}
<table><tr><td height="10px"></td></tr></table>

<table cellpadding="4" cellspacing="4" width="70%" align="center" style="background-color: skyblue;
border:solid 2px red; padding-top:20px;">
<tr>
    <td colspan="3" style="background-color:gray; font-size:18pt;
font-weight:bold; height:30px; text-align:center;">
        Add New Student
    </td>
</tr>
<tr>
    <td style="text-align:right;">Name</td>
    <td><input type="text" ng-model="Name" />  </td>
</tr>
<tr>
    <td style="text-align:right;">Price</td>
    <td><input type="text" ng-model="Email" />  </td>
</tr>
<tr>
    <td></td>
    <td>
        <input type="button" value="{{testing}}" data-ng-click="save()" />
    </td>
</tr>

</table>  

Module.js

var app = angular.module("ApplicationModule", ["ngRoute"]);

app.factory("ShareData", function ()
{
    return {value : 0}
});

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider.when('/showproducts',
{
    templateUrl: 'ProductMVC/ShowAllProducts',
    controller: 'ShowProductsController'
});
$routeProvider.when('/addproduct',
{
    templateUrl: 'ProductMVC/AddProduct',
    controller: 'AddProductController'
});
$routeProvider.otherwise(
{
    redirectTo: '/'
});

}]);

AddProductController.js

app.controller('AddProductController', function ($scope, SPACRUDService) {
$scope.testing = 'World';

$scope.save = function () {
    console.log('test_mode');
    //var Product = {
    //    Name: $scope.Name,
    //    Price: $scope.Price
    //};
};

//var promisePost = SPACRUDService.post(Product);

//promisePost.then(function(pl){
//    alert('Product saved successfully');
//},
//function (errorPl) {
//    $scope.error = 'Failure saving product', errorPl;

//});
})

ShowProductsController.js

app.controller('ShowProductsController', function ($scope, $location, SPACRUDService, ShareData) {
loadAllProductsRecords();

function loadAllProductsRecords(){
    var promiseGetProduct = SPACRUDService.getProducts();

    promiseGetProduct.then(function (pl) {
        $scope.Products = pl.data
    },
    function (errorPl) {
        $scope.error = errorPl;
    });
}


})

0 个答案:

没有答案