Angular JS - “Error: [$interpolate:interr] Can't interpolate:” from a working function

Question

I'm getting the following error in one of my functions:

Error: [$interpolate:interr] http://errors.angularjs.org/1.3.0-rc.4/$interpolate/interr?p0=%7B%7B%20crea…&p1=TypeError%3A%20Cannot%20read%20property%20'startDate'%20of%20undefined
    at Error (native)
    at file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:6:421
    at z.exp (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:86:481)
    at file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:56:215
    at q (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:7:404)
    at C (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:56:16)
    at g (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:50:19)
    at C (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:57:303)
    at g (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:50:19)
    at C (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:57:303) VM8667 angular.min.js:99
Error: [$interpolate:interr] http://errors.angularjs.org/1.3.0-rc.4/$interpolate/interr?p0=%7B%7B%20crea…&p1=TypeError%3A%20Cannot%20read%20property%20'startDate'%20of%20undefined
    at Error (native)
    at file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:6:421
    at z.exp (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:86:481)
    at pre (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:66:455)
    at U (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:68:177)
    at C (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:57:169)
    at g (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:50:19)
    at C (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:57:303)
    at g (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:50:19)
    at C (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:57:303) VM8667 angular.min.js:99
3TypeError: Cannot read property 'car' of undefined
    at k.$scope.createCsvFilename (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/js/msfcontroller.js:26:31)
    at file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:191:296
    at Object.<anonymous> (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:103:395)
    at k.$digest (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:118:410)
    at k.$apply (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:121:460)
    at file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:18:101
    at Object.e [as invoke] (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:36:215)
    at d (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:18:22)
    at kc (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:18:316)
    at Ad (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:17:130)

Is weird because everything works as it is supposed to.

Here's the relevant code to the error (the filename attribute causes it):

<button class="btn btn-success" 
        type="button" 
        ng-csv="filteredRecords" 
        filename="{{ createCsvFilename(dates, search) }}">
            Download {{filteredRecords.length}} results as CSV
</button>

And the function in question:

$scope.createCsvFilename = function(dates, search) {
    var startMoment = moment(dates.startDate);
    var endMoment = moment(dates.endDate);
    var filterCar = search.car;
    var filterDriver = search.driver;
    return startMoment.format('DD-MM-YYYY') + ' - ' + endMoment.format('DD-MM-YYYY') + ' - Car_' + filterCar  + ' - Driver_' + filterDriver + '.csv';
}

The search.car and search.driver are filter inputs that are undefined until the user fills them up.

Any idea about what might be causing the error?

Answer 1

Define the objects in your controller scope.

$scope.search={"car":"","driver":""} 
$scope.dates={"startDate":"","endDate":""}

And change your method as like below

$scope.createCsvFilename = function() {
    var startMoment = moment($scope.dates.startDate);
    var endMoment = moment($scope.dates.endDate);
    var filterCar = $scope.search.car;
    var filterDriver = $scope.search.driver;
    return startMoment.format('DD-MM-YYYY') + ' - ' + endMoment.format('DD-MM-YYYY') + ' - Car_' + filterCar  + ' - Driver_' + filterDriver + '.csv';
}

Also, remove params in calling a method

<button class="btn btn-success" 
        type="button" 
        ng-csv="filteredRecords" 
        filename="{{ createCsvFilename() }}">
            Download {{filteredRecords.length}} results as CSV
</button>