Угловой js пользовательский фильтр undefined

Question

Я новичок в Angular JS и работает с настраиваемым фильтром для месяца в дате рождения.

Функция monthName определена внутри контроллера.

Когда я пытаюсь запустить файл ошибки: -

Uncaught ReferenceError: monthName is not defined 

HTML: -

<select ng-model="main.userdobmonth" ng-change="main.getMonthDays()"> 
    <option ng-selected="{{$index+1==main.userdobmonth}}" value="{{$index+1}}" 
      ng-repeat="a in main.rangeDate(12) track by $index">{{$index+1 | monthName}}</option> 
</select> 

Мой код контроллера: -

angular.module('HC', ['ngAnimate']) 
    .controller('MainController', MainController) 
    .filter('monthName', monthName); 

// Inject dependencies 
MainController.$inject = ['U', 'M', 'S', '$filter', '$upload', '$timeout']; 

function MainController(U, M, S, $filter, $upload, $scope, $timeout) { 

    // .... 

    function monthName() { 
     return function (monthNumber) { //1 = January 
      var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 
       'July', 'August', 'September', 'October', 'November', 'December']; 
      return monthNames[monthNumber - 1]; 
     } 
    } 

} 

Любое решение?

Answer 1

Вы определили monthName внутри MainController. В результате это локальная переменная, которая недоступна снаружи, где вы пытаетесь ее использовать. Решение состоит в том, чтобы переместить его снаружи.

function MainController (U, M, S, $filter, $upload, $scope, $timeout) { ... } 

function monthName() { ... }