Discussion :

[gabouille]

Bonjour a tous,

Apres plus d'une semaine de recherche je viens vers vous concernant un probleme lie a l'utilisation de $rootscope broadcast/on, $interval, et de ng-repeat.
je m'excuse d'avance si le probleme est traite dans un autre topic, j'ai pourtant passe bcp de temps a chercher.

Mes problemes sont les suivants :

1. avoir deux $interval independant sur la meme page : j'ai la sensation que ce n'est pas possible.

2. controler le refresh de la page :

mon objectif : si mon objet workflowmetadatalist est different du precedent, j'actualise ma zone html. sinon je n'actualise pas la zone.
en plus du code que j'ai partage ci-dessous cohabite un autre couple factory/controller/html de structure similairdont le temps de refresh est de 2000 ms.

mon probleme : mon $rootscope.on('APPCatalog') est bien execute quand le je souhaite.
dans le html, la zone englobee par les ng-repeat est reconstruite toute les 2000ms. --> ma zone est donc polluée par l'autre evenement.

Question global: comment puis-je empecher la zone html d'etre rafraichie tout en gardant les valeurs precedente ?

Merci Grandement !

Gab



html - zone englobee dans par le ng-controller:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="ibox float-e-margins" ng-controller="APPCatalogController">
                <div class="ibox-heading">
                    <h1>{{view[0].catalog.title}}</h1>
                </div>
 
                <div class="ibox-content col-sm-12">
                    <div class="input-group m-b col-sm-6">
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        <input type="text" placeholder="Search" class="form-control" ng-model="query">
                    </div>
 
                    <div class="ibox-content" slim-scroll box-height="600px">
                        <div class="col-sm-12" style="margin-left: -20px; " ng-repeat="workflows in workflowsMetadataList | filter:query | groupBy: 'project_name'| toArray:true | orderBy:'$key'">
 
                             <h3>{{workflows.$key}}</h3>
                                <div class="col-sm-3"  ng-repeat="w in workflows" ng-click="showSubmitWorkflowModal(w)">
                                    <div class="panel panel-default">
                                    <div class="panel-body">
                                        <img ng-src="{{appFindImageUrl(w)}}"
                                             alt="{{w.name}}"
                                             />
                                        <div>
                                            <span>{{w.name}}</span>
                                        </div>
                                    </div>
                                    <div class="panel-footer">
                                        <div>
                                            {{ w.name }}
                                        </div>
                                    </div>
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>

Js - Factory APPCatalog

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
appCtrl.factory('APPCatalog', function ($http, $rootScope, SpringDataRestAdapter, $interval) {
 
    var APPCatalogRefreshTime = 10000;
 
    var workflowsMetadataList = [];
    var nbworkflows = 0;
 
    var appCatalog = JSON.parse(localStorage['appCatalogUrl']);
 
 
        function getAPPCatalog() {
 
        var scopeResponse;
        console.log("APPCatalog.APPCatalog http.get url : " + appCatalog);
 
        var httpPromise = $http.get(appCatalog)
            .success(function (response) {
                console.log("APPCAtalog.getAPPCAtalog http.get success " );
            })
            .error(function (response) {
                console.error("APPCatalog http.get error", status, response);
            });
 
 
 
        SpringDataRestAdapter.process(httpPromise).then(function (processedResponse) {
           // if workflowsMetadataList is not equivalent to its previous value OR if workflowsMetadataList is empty (useful for the first load)
            if (angular.equals(workflowsMetadataList, processedResponse._embeddedItems) == false || workflowsMetadataList == [] ) {
                workflowsMetadataList = processedResponse._embeddedItems;
                nbworkflows = processedResponse.page.totalElements;
 
                $rootScope.$broadcast('event:APPCatalog');
            }
 
        });
        $rootScope.$on('event:StopRefreshing', function () {workflowsMetadataList = []});
    }
 
    function refreshAPPCatalog() {
 
        getAPPCatalog();
 
        // Interval initialization
        var intervalPromise = $rootScope.$interval(getAPPCatalog, APPCatalogRefreshTime);
 
        console.debug("broadcasting refreshAPPCatalog");
        // Interval stopping condition
        $rootScope.$on('event:StopRefreshing', function () {
            if (angular.isDefined(intervalPromise)) {
                $interval.cancel(intervalPromise);
                intervalPromise = undefined;
            }
        });
    }
 
    return {
        getworkflowsMetadataList: function () {
            return workflowsMetadataList;
        },
        getnbworkflows: function () {
            return nbworkflows;
        },
        refreshAPPCatalog: function () {
            return refreshAPPCatalog();
        }
    };
});

js - appcatalogController

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
appCtrl.controller('APPCatalogController', function ($scope, $rootScope, $uibModal, $http, $filter, APPCatalog, PCANodeSourcesService, loadingConfigData) {
 
 
 
    $scope.workflowsMetadataList = [];
 
    $scope.view = [];
    var schedulerRestUrl = JSON.parse(localStorage['schedulerRestUrl']);
    var appCatalogUrl = JSON.parse(localStorage['appCatalogUrl']);
 
    // get catalog name
 
    loadingConfigData.success(function(response){
        $scope.view = response.view; // used in html as following : view[0].catalog.title
    });
 
    // get list
    $rootScope.$on('event:APPCatalog', function () {
        $scope.workflowsMetadataList = APPCatalog.getworkflowsMetadataList();
        console.debug("event APPCatalog fired in APP Catalog Controller");
    });
 
    $scope.appFindImageUrl = function (selectedWorkflow) {
        console.debug("function findImageUrl is called ");
        if($filter('getByKey')('pca.action.icon', selectedWorkflow.generic_information) == ""){
            return "/studio/images/about_115.png";
        }
        else{
            if ($filter('getByKey')('pca.action.icon', selectedWorkflow.generic_information) == undefined){
 
            }
            return $filter('getByKey')('pca.action.icon', selectedWorkflow.generic_information);}
    };
 
 
}

[Invité]

Heu, Il n'y aurait pas moyen plutôt d'utiliser $watchCollection pour surveiller quand ton modèle de données change et d'actualiser la vue en conséquence ?

j'adore $watchCollection, ca marche trop bien.

[gabouille]

Hello !

Mon probleme n'est pas au niveau de mon control, qui fonctionne bien d'ailleurs avec angular.equals()

C'est plutot mon html qui se rafraichi, que mon control soit true ou false.
je ne sais pas comment stopper le ng-repeat qui se trouve dans mon html tout en gardant mes donnes affichees (j'avais mis un ng-if qui fonctionne mais mes donnees ne sont plus affichees).

merci !

Gabriel

[Marco46]

Ton approche est mauvaise. N'utilise pas les events, c'est une horreur à maintenir ça crée du code spaghetti. Les events en angular sont des sortes de GOTO asynchrones. A bannir.

D'une manière générale, il faut bannir toute injection de $rootScope et $scope.

Tu as une couche service avec ton APPCatalog qui requête ton endpoint. Il te manque seulement une couche model (nommée par exemple APPCatalogModel) qui hébergera les données publiées dans la vue, sous forme de service. Ton service est alors publié dans le contrôleur (dans la vue donc, puisque le contrôleur n'est rien d'autre que le constructeur de ton scope), angular détectera les changements et mettra la vue à jour tout seul.

[gabouille]

Hello Marco46,

Merci Beaucoup pour ton retour,
Je ne suis pas non plus fan de mon approche et je partage ton point de vue sur la gestion peut flexible.

Aurais-tu à tout hasard un exemple qui pourrait me guider ?

Gab