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 ?

Answer 1

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">)