Javascript AngularJS渲染更新记录+;拉维后端
UpdateEmployeeController.jsJavascript AngularJS渲染更新记录+;拉维后端,javascript,php,angularjs,laravel,Javascript,Php,Angularjs,Laravel,UpdateEmployeeController.js <div class="col-xs-12"> <h2>Listing Employee</h2> <hr> <div class="employeeGrid"> <table> <tr> <th><a href="" ng-click="orderByField='name'; reve
<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>
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;
}
});
};
EmployeeController.php
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');
}
问题
如何在编辑操作期间将事件从UpdateEmployeeController解析为EmployeeController,并使用数据库中的更新数据呈现(重新加载)特定记录。看起来您的控制器是同级的,这意味着它们无法相互通信。兄弟姐妹之间沟通的唯一方式是通过他们的父母。幸运的是,
$rootScope
始终是一个共同的祖先。首先,将$rootScope
传递给UpdateEmployeeController。然后,在scope.updateEmployee
函数中,转到.Then()
并执行以下操作
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']);
}
}
回到你的雇主那里
.then(function successCallback(response){
$rootScope.$broadcast('employeeWasUpdated', response.data);
}
事件部分工作,但html呈现不工作。EmployeeWasUpdate
scope.$on('employeeWasUpdated', function (event, args) {
scope.init();
//console.log(args) //outputs response.data content
});