AngularJS 형식의 POST 데이터를 Play Framework 컨트롤러에 보내는 방법

Question

ajax 및 AngularJS로 표시되는 고객 목록 (Play Framework 2.2.1 & 스칼라)에 있습니다. 그것은 잘 작동하고, 지금은 jQuery UI로 만든 JS 팝업과 함께 새로운 고객을 내 목록에 동적으로 추가하려고합니다.

먼저 HTML/AngularJS 형식으로 보낸 브라우저 데이터를 표시하는 방법을 검색하지만 제출 버튼을 클릭하면 아무 일도 일어나지 않습니다 ... 그리고 다른 AngularJS 작업이 작동하는 이유를 모르겠습니다. 여기

내 코드입니다 :

• 자바 스크립트

  function AddCustomerController($scope) { 
      $scope.add = function() { 
       $scope.customers.push({id: $scope.email, phone: $scope.phone, isActivated: $scope.activation, name: $scope.name, roleType: $scope.roleType}); 
      } 
  } 
  

• HTML

  <div id="dialogAddCustomer" title="title" ng-controller="AddCustomerController"> 
      <label id="dialNewCustomerName">Add Customer</label> 
  
      <label class="lblPopUp">Email</label> 
      <input type="text" id="dialNewCustomerEmail" class="form-control" ng-model="email" /> 
  
      <label class="lblPopUp">Phone Number</label> 
      <input type="text" id="dialNewCustomerPhone" class="form-control" ng-model="phone" /> 
  
      <label class="lblPopUp">Customer Activated ?</label> <br /> 
      <input type="radio" name="activation" id="dialNewCustomerYes" value="1" ng-model="activation" /> Yes 
      <input type="radio" name="activation" id="dialNewCustomerNo" value="2" ng-model="activation" /> No 
  
      <label class="lblPopUp">Name</label> 
      <input type="text" id="dialNewCustomerName" class="form-control" ng-model="name" /> 
  
      <label class="lblPopUp">Role Type</label> <br /> 
      <select class="form-control" ng-controller="RoleTypesController"> 
       <option ng-repeat="roleType in roleTypes" value="{{roleType.id}}" ng-model="roleType">{{roleType.name}}</option> 
      </select> 
      <br /> 
      <button class="btn btn-default" type="submit" ng-click="add()">Validate</button> 
  </div> 
  

둘째, 나는 내 컨트롤러에 데이터를 푸시하는 방법을 모른다 (나는 이미 웹에서 검색했다.) corr 새로운 고객을 데이터베이스에 삽입하는 방법.

어떤 아이디어 또는 팁?

Answer 1

AddCustomerController을 HTML에 추가하거나 add() 기능을 CustomerController으로 옮길 수도 있습니다.

customer 개체를 범위에 넣고 개별 필드를 추가 한 다음 customer.email, customer.phone 등을 통해 액세스해야합니다. 범위 지정 문제를 방지하고 컨트롤러 코드를 훨씬 단순하게 만드는 데 도움이됩니다.

또한 서버에 데이터를 보내지 않으므로 Play와는 아무런 관련이 없습니다 (이를 수행하는 방법에 대한 Angular의 설명서에서 $ http를 확인하십시오).

Answer 2

절대 코드가 AngularJS에 아무 것도 보내지 않도록 지시하기 때문에 서버로 보내지 않습니다.

add 함수는 로컬 범위 만 수정하며 $http.post()을 호출하지 않습니다.

HTML 용어로 너무 많이 생각하고 AngularJS 용어로는 충분하지 않을 수 있습니다. 각도를 사용하면 양식이 필요하지 않습니다. 특히 유효성 검사에 유용 할 수 있지만 필수는 아닙니다. 모델은 양식의 유무에 관계없이 중요한 요소입니다. 일반적으로

, 나는 당신의 input의 객체의 일부를 수정할 필요하므로 대신 제안 :

<input type="text" ng-model="email" /> 
<input type="text" ng-model="phone" /> 
<button type="submit" ng-click="add()">Add</button> 

을 대신 수행

<input type="text" ng-model="customer.email" /> 
<input type="text" ng-model="customer.phone" /> 
<button type="submit" ng-click="add(customer)">Add</button> 

컨트롤러 무언가처럼 :

function AddCustomerController($scope, $http) { 
    $scope.customer = {}; 
    $scope.add = function(newCustomer) { 
     // this assumes newCustomer has been validated 
     $http.post('/api/customers', newCustomer); // TODO: handle response 
    } 
} 

보조 메모로 각도에 가까워 질수록 jquery와 j가 덜 필요합니다. 질문 ui - 페이지가 jquery 또는 angular 중 하나이지만 둘 다 결코 아니라는 규칙이 있습니다. YMMV.