我正在关注此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;
});
}
})