2016-01-04 75 views
0

我是Angular的新手,我嘗試做一個簡單的練習單頁面應用程序,以後我可以使用它來開發。我使用: http://websystique.com/springmvc/spring-mvc-4-angularjs-example/ 作爲教程,但我嘗試使用「重置」和「添加」按鈕時出現問題。他們什麼都不做。他們甚至不提供任何控制檯錯誤。Spring Maven Angjular JS麻煩

下面是從JSP代碼:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
pageEncoding="ISO-8859-1"%> 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 



<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 
</head> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script> 
    <script src="<c:url value='/static/app.js' />"></script> 
    <script src="<c:url value='/static/javascript/frontend.service/employees_service.js' />"></script> 
    <script src="<c:url value='/static/javascript/frontend.controller/employees_controller.js' />"></script> 
<body ng-app="myApp"> 
<div ng-controller="EmployeesController"> 
    <p>Register Form</p> 
    <form ng-submit="EmployeesController.submit()" name="myForm" id="myForm"> 
     <input type="hidden" ng-model="EmployeesController.employee.id"/> 
     <br/> 
     First Name: <input type="text" ng-model="EmployeesController.employee.first_name" id="first_name" placeholder="First Name"/> 
     <br/> 
     LAST NAME: <input type="text" ng-model="EmployeesController.employee.last_name" id="last_name" placeholder="Last Name"/> 
     <br/> 
     EMAIL: <input type="email" ng-model="EmployeesController.employee.email" id="email" placeholder="E-mail adress"/> 
     <br/> 
     DEP ID:<input type="text" ng-model="EmployeesController.employee.dep_id" id="dep_id" placeholder="Department ID"/> 
     <br/> 
     SALARY: <input type="text" ng-model="EmployeesController.employee.salary" id="salary" placeholder="Salary"/> 
     <br/> 
     <input type="submit" value="{{!EmployeesController.user.id ? 'Add' : 'Update'}}"/> 
     <button type="button" ng-click="EmployeesController.reset()" ng-disabled="myForm.$pristine">Reset Form</button> 

    </form> 
</div> 

</body> 
</html> 

這裏是控制器:

/** 
* employees_controller TODO 
*/ 
App.controller('EmployeesController', 
    ['$scope','EmployeesService', function($scope,EmployeesService){ 

this.employees = []; 
this.employee={emp_id:null,first_name:'',last_name:'',email:'',dep_id:null,salary:''}; 

this.getAllEmployees = function(){ 
    EmployeesService.getAllEmployees().then(
      function(result){ 
       this.employees = result; 
      }, 
      function(error){ 
       alert(error); 
       console.log('cant get em') 
      } 
    ); 
}; 

this.addEmployee = function(employee){ 
    EmployeesService.addEmployee(employee).then(
      this.getAllEmployees, 
      function(error){ 
       console.log('error adding employee'+employee);} 
    ); 

}; 

this.editEmployee = function(employee,id){ 
    EmployeesService.editEmployee(employee,id).then(
      this.getAllEmployees, 
      function(error){ 
       console.log('error editing employee with id '+id +' ' +employee);} 
    ); 
}; 
this.removeEmployee = function(id){ 
    EmployeesService.removeEmployee(id).then(
      this.getAllEmployees, 
      function(error){ 
       console.log('error removing employee '+id) 
      } 
    ); 
}; 

this.getAllEmployees(); 
var self = this; 
self.reset = function(){ 
    console.log('reset form'); 
    this.employee={emp_id:null,first_name:'',last_name:'',email:'',dep_id:'',salary:''};  
    $scope.myForm.$setPristine(); 
}; 

this.submit = function(){ 
    console.log('in submit'); 
    if(this.employee.id === null){ 
     console.log('null id'); 
     console.log('creating employee'); 
     this.addEmployee(this.employee); 
    }else{ 
     console.log('submit - nothing for now'); 
    } 
}; 

this.edit = function(id){ 
    for(var i = 0;i<this.employees.length;i++){ 
     if(this.employees[i].id === id){ 
      this.employee = angular.copy(this.employees[i]); 
      break; 
     } 
    } 
}; 

this.remove = function(id){}; 

}]); 

我的問題是,復位和提交功能都完全忽略了對按鈕的點擊。在瀏覽器控制檯中,我無法收到任何消息或錯誤,同時遵循javascript控制檯。任何幫助?謝謝。

回答

1

錯誤地訪問控制器屬性和方法。您可以使用ng-controller="EmployeesController as employeessController"ng-controller="EmployeesController as employeessController"和(對於ngModels和reset同樣如此推薦)或者直接將字段和方法綁定到作用域。

https://docs.angularjs.org/api/ng/directive/ngController(這兩個選項都在示例中描述)

+0

是的。那是爲我做的。萬分感謝! – dskfdskjgds

1

我認爲你的問題可能在於你如何構建你的應用程序。在JavaScript文件中,您使用this的所有內容實際上應該是$scope。所以,而不是this.employees,你會做$scope.employees。在jsp文件中,沒有一個ng模型應該在它們前面有EmployeesController

本質上,通過將變量和函數放入$scope對象中,您的控制器會將它們暴露給應用程序的當前視圖。從這裏,你可以調用你需要的函數,而不用在EmployeesController前面添加它,如果這是有道理的話。