AngularJS와 레코드 + Laravel 백엔드

Question

<div class="col-xs-12"> 
<h2>Listing Employee</h2> 
<hr> 
<div class="employeeGrid"> 
    <table> 
     <tr> 
      <th><a href="" ng-click="orderByField='name'; reverseSort = !reverseSort">Name</a></th> 
      <th><a href="" ng-click="orderByField='age'; reverseSort = !reverseSort">Age</a></th> 
      <th><a href="" ng-click="orderByField='gender'; reverseSort = !reverseSort">Gender</a></th> 
      <th><a href="" ng-click="orderByField='company'; reverseSort = !reverseSort">Company</a></th> 
      <th>Action</th> 
     </tr> 
     <tr ng-repeat="person in employee | orderBy:orderByField:reverseSort""> 
      <td>{{person.name}}</td> 
      <td>{{person.age}}</td> 
      <td>{{person.gender}}</td> 
      <td>{{person.company}}</td> 
      <td> 
       <button class="btn" ng-click="viewEmployee(person.id)"><span class="glyphicon glyphicon-eye-open"></button> 
       <button class="btn" ng-click="editEmployee(person.id)"><span class="glyphicon glyphicon-pencil"></button> 
       <button class="btn" ng-click="deleteEmployee(person.id)"><span class="glyphicon glyphicon-trash"></button> 
      </td> 
     </tr> 
    </table>   
</div> 

EmployeeController.js

scope = $scope; 

scope.employee = []; 

scope.$on('$stateChangeSuccess', function() { 
    scope.init(); 
}); 

scope.init = function(){ 
    $http({ 
     method: 'GET', 
     url: '/api/v1/employee/list' 
    }).then(function successCallback(response){ 
     scope.employee = response.data; 
    }); 
} 

scope.editEmployee = function(val){ 

    empScope = $scope; 

    $uibModal.open({ 
     animation: false, 
     templateUrl: '../assets/templates/modal/employee/updateEmployee.php', 
     controller: 'UpdateEmployeeController', 
     size: '', 
     backdrop: 'static', 
     resolve: { empId: function() { return val; } } 
    }).result.catch(function(res) {  
      if (!(res === 'cancel' || res === 'escape key press')) { 
      throw res; 
      } 
    }); 
}; 

UpdateEmployeeController.js

scope = $scope; 

scope.employee = []; 

$http({ 
     method: 'GET', 
     url: '/api/v1/employee/get/' + scope.$resolve.empId 
}).then(function successCallback(response){ 
     scope.employee = response.data; 
}); 

scope.updateEmployee = function(){ 

     $http({ 
      method: 'POST', 
      url: '/api/v1/employee/update/' + scope.$resolve.empId, 
      data: { 
       name:scope.employee.name, 
       age:scope.employee.age, 
       gender:scope.employee.gender, 
       company:scope.employee.company 
      } 
     }).then(function successCallback(response){ 
      //console.log(response.data);      
     }, function errorCallback(response) { 
      console.log(response.data); 
     }); 

     //scope.$dismiss('cancel'); 
} 

EmployeeController.php

public function lsAll(){ 
    $employee = Employee::all(); 
    return $employee; 
} 

public function getOne($id){ 
    $employee = Employee::find($id); 
    return $employee; 
} 

public function update(Request $request, $id){ 
    $employee = Employee::findOrFail($id);  

    $name=$request->input('name'); 
    $age=$request->input('age'); 
    $gender=$request->input('gender'); 
    $company=$request->input('company'); 

    $employee->name = $name; 
    $employee->age = $age; 
    $employee->gender = $gender; 
    $employee->company = $company; 

    if($employee->save()){ 
     return response()->json(['response' => 'The employee record is updated successful']); 
    }else{ 
     return response()->json(['response' => 'Failed to update the employee record']); 
    } 
} 

,536 업데이트 렌더링

질문

어떻게 편집 작업시에는 EmployeeController에 UpdateEmployeeController에서 이벤트를 구문 분석하고 (재 장전) 데이터베이스에서 업데이트 된 데이터를 특정 레코드를 렌더링 할.

Answer 1

컨트롤러가 형제가되어 서로 대화 할 수 없다는 것을 의미합니다. 형제 간의 의사 소통을하는 유일한 방법은 부모를 통해서입니다. 다행히도 $rootScope은 항상 공통 조상입니다. 먼저 $rootScope을 UpdateEmployeeController에 전달합니다. 그런 다음, scope.updateEmployee 함수는 .then()에 가서에는 EmployeeController

scope.$on('employeeWasUpdated', function (event, args) { 
    scope.init(); 
    //console.log(args) //outputs response.data content 
});