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

Question

我的一个函数出现以下错误:

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)

很奇怪，因为一切都按预期进行。

这是错误的相关代码(文件名属性导致错误):

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

有问题的函数:

$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';
}

search.car 和 search.driver 是过滤器输入，在用户填写它们之前是未定义的。

知道可能导致错误的原因吗？

Answer 1

在您的 Controller 范围内定义对象。

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

然后像下面这样改变你的方法

$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';
}

此外，在调用方法时删除参数

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