ng-click 不起作用，mysql 中没有发布数据
Posted
技术标签:
【中文标题】ng-click 不起作用，mysql 中没有发布数据【英文标题】：ng-click not working , no data posted in mysql 【发布时间】：2017-02-17 02:14:22 【问题描述】：当我意识到我被困在教程的第 5 部分时，我一直试图通过 Shiva Adhikari 的教程“使用 AngularJs、Node js、express js、Bootstrap、EJS、mysql 的 CRUD 应用程序”来学习以下内容。
我的问题
在提交表单以创建产品类别时，浏览器控制台不执行任何操作。我是新人，谢谢你的帮助。
app.js
// Module Dependencies ============================================================================
var express = require('express'); // call express
var app = express(); // define our app using express
var routes = require('./routes');
var http = require('http');
var path = require('path');
//var methodOverride = require('method-override'); // simulate DELETE and PUT (express4)
var bodyParser = require('body-parser');
var mysql = require("mysql");
//var favicon = require('serve-favicon');
//var morgan = require('morgan'); // log requests to console
// Environment =================================================================================
app.set('port', process.env.PORT || 3000);
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded(extended: true));
app.use(express.static(__dirname + '/public'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.get('/', routes.index);
app.get('/about', routes.about);
app.get('/contact', routes.contact);
//app.get('/fileUploader', routes.fileUploader);
var productCategoryRoute = require('./routes/productCategoryRouteConfig.js');
//var productRoute = require('./routes/productRouteConfig.js');
new productCategoryRoute(app);
//new productRoute(app);
http.createServer(app).listen(app.get('port'), function ()
console.log('Express server listening on port ' + app.get('port'));
);
createProductCategory.ejs
<% include index %>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"> <%=title %> </h3>
</div>
<div class="panel-body">
<div class="container"
data-ng-cloak
data-ng-app="productCategoryModule"
data-ng-controller="productCategoryController">
<form
class="navbar-form navbar-left" role= "search"
method = "POST"
name = "formProductCategory"
>
<div class="row">
<div class="form-group">
<label for="productCategory"> Product Category Name </label>
<input type="text"
class="form-control"
placeholder="Please Enter Product Category"
name="productCategory"
id="productCategory"
ng-model="productCategory.categoryName"
style="width:100%"
required>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label for="productDetails"> Product Category Details </label>
<textarea
class="form-control"
placeholder="Product Category Details"
name="productDetails"
id="productDetails"
rows="5"
cols="30"
ng-model="productDetails.categoryDetails"
style="width:100%"
required></textarea>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group"> <style="padding-left:40%">
<button type="button"> <class="btn btn-primary">
<ng-click="createProductCategory(productCategory)">Create Product Category</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="../../javascripts/app/productCategory/productCategoryModule.js"></script>
<script src="../../javascripts/app/productCategory/productCategoryService.js"></script>
<script src="../../javascripts/app/productCategory/productCategoryController.js"></script>productCategoryRouteConfig
function productCategoryRouteConfig(app)
this.app = app;
this.routeTable = [];
this.init();
// two types of functions add and process, get
productCategoryRouteConfig.prototype.init = function ()
var self = this;
this.addRoutes();
this.processRoutes();
;
// 1- process routes , depending on get, post, or delete
productCategoryRouteConfig.prototype.processRoutes = function ()
var self = this;
self.routeTable.forEach(function (route)
if (route.requestType == 'get')
console.log(route);
self.app.get(route.requestUrl, route.callbackFunction);
else if (route.requestType == 'post')
console.log(route);
self.app.post(route.requestUrl, route.callbackFunction);
else if (route.requestType == 'delete')
console.log(route);
self.app.delete(route.requestUrl, route.callbackFunction);
);
;
// 2- add routes below,
productCategoryRouteConfig.prototype.addRoutes = function ()
var self = this;
//3 - createProductCategory, get req
self.routeTable.push(
requestType : 'get',
requestUrl : '/createProductCategory',
callbackFunction : function (request, response)
response.render('createProductCategory', title : "Create Product Category" );
);
//4 - createProductCategory, get req
self.routeTable.push(
requestType : 'post',
//in vid he has no api here
requestUrl : '/createProductCategory',
callbackFunction : function (request, response)
var productCategoryDao = require('../server/Dao/productCategoryDao.js');
console.log(request.body)
productCategoryDao.productCategoryDao.createProductCategory(request.body,
function (status)
response.json(status);
console.log(status);
);
);
// 5- add routes, /viewProductCategory, get req
self.routeTable.push(
requestType : 'get',
requestUrl : '/viewProductCategory',
callbackFunction : function (request, response)
response.render('viewProductCategory', title : "View Product Category" );
);
// 6
self.routeTable.push(
requestType : 'get',
requestUrl : '/getAllProductCategory',
callbackFunction : function (request, response)
var productCategoryDao = require('../Server/Dao/productCategoryDao.js');
productCategoryDao.productCategoryDao.getAllProductCategory (
function (productCategories)
console.log(productCategories);
response.json( productCategories : productCategories );
);
);
;
module.exports = productCategoryRouteConfig;productCategoryController.js
//refer to the parent module
angular.module("productCategoryModule")
.controller("productCategoryController", productCategoryController);
//dependency injection, a timeout service, inject the service we need productCategoryService
productCategoryController.$inject = ['$scope', '$timeout','productCategoryService'];
//constructor
function productCategoryController($scope, productCategoryService)
//define it as object, and it will have two properties
$scope.productCategory =
categoryName: "",
categoryDetails :""
;
$scope.createProductCategory = function(productCategory)
//the ervice has a metod called createProductCategory which we give the product category
productCategoryService.createProductCategory(productCategory)
.success(function(data)
// $timeout(function() , 3000)
);
productCategoryService.js
//use same module, but make a factory, module hands data to the service
angular.module("productCategoryModule")
.factory("productCategoryService", productCategoryService);
//dependency injection, uses http, ajax service
productCategoryService.$inject = ['$http'];
function productCategoryService($http)
return
//our services, first a method to take the categories from the controller
//the services does things with the data from the controller
createProductCategory: function(productCategory)
//post to this route /createProductCategory, here is the gate request
return $http.post('/createProductCategory',
//the data we are posting to the url
categoryName: productCategoryName,
categoryDetails: productCategory.categoryDetails
);
,
//angular $http route endpoint
getAllProductCategories: function()
return $http.get('/getAllProductCategory');
;
【问题讨论】：
【参考方案1】：您的以下代码包含无效的html
<div class="row">
<div class="form-group">
<style="padding-left:40%">
<button type="button"> <class="btn btn-primary">
<ng-click="createProductCategory(productCategory)">Create Product Category</button>
</div>
</div>
应该是这样的
<div class="row">
<div class="form-group" style="padding-left:40%">
<button type="button" class="btn btn-primary" ng-click="createProductCategory(productCategory)">Create Product Category</button>
</div>
</div>
Plunker
【讨论】：
谢谢拉维！现在我得到控制台错误：angular.js:13920 TypeError: productCategoryService.createProductCategory is not a function at m.$scope.createProductCategory (productCategoryController.js:24) 你能调试一下，看看第 24 行出了什么问题 $scope.createProductCategory = function(productCategory) productCategoryService.createProductCategory(productCategory) .success(function(data) // $timeout(function() , 3000) ); 我已经告诉你调试并查看第 24 行发生的情况，不要粘贴一些代码。 对不起，你的意思是使用一些东西来调试或只是盯着它看？大声笑已经看了太多小时了；）以上是关于ng-click 不起作用，mysql 中没有发布数据的主要内容，如果未能解决你的问题，请参考以下文章
Angular `ng-click` 在 DataTables 表行中不起作用