web-dev-qa-db-ja.com

Angular JS-「エラー：[$ interpolate：interr]は補間できません：」動作中の関数から

関数の1つで次のエラーが発生します。

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)

すべてが想定どおりに機能するため、奇妙です。

エラーに関連するコードは次のとおりです（filename属性が原因です）。

<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は、ユーザーが入力するまで定義されないフィルター入力です。

エラーの原因について何か考えはありますか？

javascriptangularjsinterpolation
6
Eric Mitjans

コントローラスコープでオブジェクトを定義します。

$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>
5
Asik