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']);
    }
}

问题

如何在编辑操作期间将事件从UpdateEmployeeController解析为EmployeeController，并使用数据库中的更新数据渲染（重新加载）特定记录。

Answer 1

It seems your controllers are sibling it means they cannot talk to each other. The only way to have a communication between siblings is through their parent. And luckily, $rootScope is always a common ancestor. First, pass $rootScope to your UpdateEmployeeController. Then, your scope.updateEmployee function, go to the .then() and do

.then(function successCallback(response){
     $rootScope.$broadcast('employeeWasUpdated', response.data);                
}

Back to your EmployeeController

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

AngularJS渲染更新的记录+ Laravel后端

1 个答案: