Employee.php

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

QUESTION

How do I parse an event from UpdateEmployeeController to EmployeeController during an edit action and render (reload) a specific record with the updated data from database.

Recommended Answers

It's going to be sheer luck anyone is running that setup so try this. Break the problem down to smaller steps. If a step can't be accomplished then it's too big a step. Break it down further.

Jump to Post

All 2 Replies

It's going to be sheer luck anyone is running that setup so try this. Break the problem down to smaller steps. If a step can't be accomplished then it's too big a step. Break it down further.

I solved the problem by broadcasting an event from the child controller

$rootScope.$broadcast('employeeWasUpdated', response.data);   

and capturing the event in the parent controller

scope.$on('employeeWasUpdated', function (event, args) {
    scope.init();   
    //console.log(args) //outputs response.data content
});
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.