Delay nedorit AngularJs

Limbaje de Programare JavaScript / Node
1

Salut!

Am urmatorul select:

<select name="project"  ng-model = 'project' ng-change='changeProject(this)'>
	@if(isset($projects))
		<option value="">Alege proiect...</option>
   	 @foreach($projects as $project)
		 <option value="{{ $project->id }}" >{{ $project->name }}</option>
   	 @endforeach
	@endif
</select>

Cu ajutorul lui selectez un proiect, iar acestui proiect ii sunt aferente niste achizitii(one-to-many), achizitiile le afisez intr-un tabel cu ajutorul directivei ng-repeat, in felul urmator:

<tbody ng-show = 'achizities.length > 0'>
	<tr ng-repeat = "achizitie in achizities" data-id = "{[ achizitie.id ]}">
		<td> {[ achizitie.obiect_contract ]} </td>
	</tr>
</tbody>

Functia changeProject() apelata la change-ul din select este definita in controllerul angular in felul urmator:

scope.changeProject = function () { .post(‘achizitii/’+this.project).success(function($data){
scope.achizities = .parseJSON($data);
});
}
Controllerul Laravel care intoarce datele este urmatorul:

public function postGetAchizitii($id){
	 if(Request::ajax()) {
        $q = DB::table('achizities')->where('project_id', $id)->get();
        return json_encode($q);	
    }
}

Bun, acum problema este ca dupa ce selectez un proiect, in controllerul Angular vine jsonul din php, dar nu mi se seteaza modelul “achizities” ca sa-mi faca ng-repeat-ul din tabel, abia dupa ce selectez urmatorul proiect, imi face modelul “achizities” cel precedent, si tot asa mai departe, deci are delay de un pas.

Multumesc!

2

Am rezolvat problema in felul urmator(controller Angular):

$http.post('achizitii', { 'project_id':  project_id} ).
		  success(function(data, status, headers, config) {
		    $scope.achizities = data;
		  }).

iar in Laravel am facut asa:

$id = Input::get('project_id');
        $q = DB::table('achizities')->where('project_id', $id)->get();
		return $q;

fara a scrie if(Request::ajax()) { .....
Acum lucreaza mult mai dinamic, adica cu cealalta metoda aveam un timp mare pana se incarca pagina.

Oricum raman curios de ce cealalta metoda nu functiona bine si avea un timp de executie mare?

3

Problema de delay e cauzata cel mai probabil de modificarile de scope care nu sunt observate, cel mai simplu se rezolva cu un $scope.$apply():

$scope.changeProject = function () {
     $.post('achizitii/'+this.project).success(function($data){
         $scope.achizities = $.parseJSON($data);
         $scope.$apply();
      });
 }

Nu ar trebui sa fie diferente intre cele doua variante, la nivel de Laravel banuiesc ca tot json returneaza chiar daca nu specifici asta in mod explicit.

1 Like
4

Da, a functionat si asa.
Merci

By the way, daca pe pagina unde am in view afisate niste modele (ex. Inregistrari: {[ achizities.length ]}), si de obicei daca revin cu back in pagina respectiva imi apare sintaxa asta din view

5f078a2573df2807.png1124×298

se rezolva prin refresh, fiindca nu functioneaza nici selectul, zici ca e mort. Ceva idei ?

5

De obicei e o eroare JS la mijloc, codul de Angular care ar trebui sa faca replace-ul de valori nu apuca sa se execute. Poti verifica in consola de browser care e problema. Probabil e legata de problema urmatoare.

Cand vei naviga intre pagini te vei lovi de problema de state si routing diferit intre aplicatia angular si laravel. Tot ce faci pe pagina (exemplu ai un formular cu mai multe action-uri Ajax) la back se pierde deci utilizatorul va trebui sa introduca datele din nou. Daca asta nu e problema ignora ce am scris mai jos.

In PHP in cazul respectiv puteai sa ai rute ceva de genul:
/projects
iar dupa selectarea proiect:
/project/12/achizitii
Asa poti sa navighezi intre pagini si nu se pierde state-ul curent al aplicatiei. In cazul unui SPA facut cu Angular e recomandat sa ai rute pentru a stoca starea curenta a aplicatiei si a putea naviga intre pagini fara probleme (se foloseste serviciul $location pentru manipularea URL) si a face update la state.