angular reusing a controller function as a custom orderBy function

Question

I have a controller like this :

var moduleFichiersDupliques = angular.module('fichiersDupliques', []);

moduleFichiersDupliques.controller("FichiersDupliquesController", [ '$http', '$log', function($http, $log) {

    var store = this;

    $http.get('groupes-dupliques-data.json').success(function(data) {
        store.groupesDupliquesData = data;
    });

    this.getNombreFichiersDansGroupe = function(groupe) {
        return groupe.fichiers.length;
    };

    this.getTailleFichier = function(groupe) {
        return groupe.tailleTotale / this.getNombreFichiersDansGroupe(groupe);
    };

    this.getTailleGaspillee = function(groupe) {
        var tailleGaspillee = groupe.tailleTotale - this.getTailleFichier(groupe);
        return tailleGaspillee;
    };
}]);

and a ng-repeat in my html code

<td ng-repeat="groupe in fichiersDupliquesCtrl.groupesDupliquesData | orderBy:fichiersDupliquesCtrl.getTailleGaspillee:true">
{{fichiersDupliquesCtrl.getTailleGaspillee(groupe)}}
</td>

And I get this error :

TypeError: Cannot read property 'getTailleFichier' of undefined
at getTailleGaspillee (/test/js/fichiersdupliques.js:26:58)
at Array.<anonymous> (/test/js/angular-1.3.0.js:17321:24)
at comparator (/test/js/angular-1.3.0.js:17330:36)
at /test/js/angular-1.3.0.js:17337:34
at Array.sort (native)
at /test/js/angular-1.3.0.js:17326:22
at $parseFilter (/test/js/angular-1.3.0.js:11939:19)
at Object.interceptedExpression (/test/js/angular-1.3.0.js:12579:21)
at Scope.$digest (/test/js/angular-1.3.0.js:13957:40)
at Scope.$apply (/test/js/angular-1.3.0.js:14227:24)

How can I refactor my code so that this function can be used in both a custom orderBy function and in my html page ?

Scanning the code it looks like `{{fichiersDupliquesCtrl.getTailleGaspillee(groupe)}}` should be `{{groupe.getTailleGaspillee(groupe)}}` — JimmyRare, Oct 30 '14 at 11:02

score 0 · Accepted Answer · answered Oct 30 '14 at 11:02

You're going to want to use $scope.

Replace:

<td ng-repeat="groupe in fichiersDupliquesCtrl.groupesDupliquesData | orderBy:fichiersDupliquesCtrl.getTailleGaspillee:true">
    {{fichiersDupliquesCtrl.getTailleGaspillee(groupe)}}
</td>

With:

<td ng-repeat="groupe in groupesDupliquesData | orderBy:getTailleGaspillee:true">
    {{getTailleGaspillee(groupe)}}
</td>

Then for your controller:

moduleFichiersDupliques.controller("FichiersDupliquesController", ['$scope', '$http', '$log', function($scope, $http, $log) {
    $scope.getNombreFichiersDansGroupe = function(groupe) {
        return groupe.fichiers.length;
    };
    $scope.getTailleFichier = function(groupe) {
        return groupe.tailleTotale / $scope.getNombreFichiersDansGroupe(groupe);
    };
    $scope.getTailleGaspillee = function(groupe) {
        var tailleGaspillee = groupe.tailleTotale - $scope.getTailleFichier(groupe);
        return tailleGaspillee;
    };
}]);

This way, you don't have to specify fichiersDupliquesCtrl in your html everywhere, as long as the html is in fichiersDupliquesCtrl's scope.
(Meaning, in a <div ng-controller="FichiersDupliquesController">)

This solution does work. But is there a way to keep the "this" way of coding controllers instead of the "$scope" way of coding them ? I understood the "this" way was better because of http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers — Dominique, Oct 30 '14 at 12:25

angular reusing a controller function as a custom orderBy function

1 Answers1