Использование службы в директиве (angularjs)

Question

Я создал приложение с угловыми и созданными директивами меню, которые будут применяться на основе загружаемого представления.

Это структура моих директив меню:

angular.module('myApp') 
.directive('ogSection1Nav', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    templateUrl: '../scripts/directives/section1_nav.html', 
    controller: function($scope, $location) { 

     $scope.getClass = function(path) { 
     var cur_path = $location.path().substr(0, path.length); 
     if (cur_path === path) { 
     if($location.path().substr(0).length > 1 && path.length === 1) 
      return ""; 
     else 
      return "currentNav"; 
     } else { 
      return ""; 
     } 
     } 

    } 
    }; 
}); 

Шаблон

<section class="adminMenu">  
    <nav class="side-nav"> 
    <ul> 
     <li ng-class="getClass('/section1_summary')"><a href="#/section1_summary"><img title="Summary" src="images/summary.svg" title="Summary" height="25" /><span class="navText">Summary</span></a></li> 
     <li ng-class="getClass('/section1_spot_list')"><a href="#/section1_spot_list"><img title="Spot List" src="images/postList.svg" title="" height="25" /><span class="navText">Spot List</span></a></li> 
     <li ng-class="getClass('/section1_volume')"><a href="#/section1_volume"><img title="Volume" src="images/volumeHour.svg" title="" height="25" /><span class="navText">Volume</span></a></li> 
     <li ng-class="getClass('/section1_location')"><a href="#/section1_location"><img title="Location" src="images/geography.svg" title="" height="25" /><span class="navText">Location</span></a></li> 
     <li ng-class="getClass('/section1_media_type')"><a href="#/section1_media_type"><img title="Media Type" src="images/mediaType.svg" title="" height="25" /><span class="navText">Media Type</span></a></li> 
    </ul> 
</nav> 
</section> 

Функция GetClass проверяет текущее местоположение и сравнивает его с пути, как это определено в нг-класса = "GetClass ('/ section1_volume') "на элементах li и присоединяет текущий класс current к текущей странице.

Теперь у меня есть целая куча этих директив меню и не хочу, чтобы всегда дублировать ту же функцию в каждой директиве, так что я настроить услугу следующим образом:

angular.module('myApp') 

.service('MenuState', function($location) { 

    this.getClass = function(path) { 
    var cur_path = $location.path().substr(0, path.length); 
    if (cur_path === path) { 
    if($location.path().substr(0).length > 1 && path.length === 1) 
     return ""; 
    else 
     return "currentNav"; 
    } else { 
    return ""; 
    } 
    }; 

}); 

Я затем вызвать функцию GetClass в моих директивах следующим образом:

angular.module('portalDashboardApp') 
    .directive('ogAdvertisingMediatracNav', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    templateUrl: '../scripts/directives/advertising_mediatrac_nav.html', 
    controller: function($scope, MenuState) { 
      $scope.getClass = MenuState.getClass(); 
     } 
    }; 
}); 

Однако я получаю следующее сообщение об ошибке: TypeError: не удается прочитать свойство «длина» неопределенной

я считать, что это клюв ause переменная path не передается моей службе, но я не уверен, как заставить эту службу потянуть мой путь, пройдя различные разделы ng-class = "getClass ('/ path_name')"> моих шаблонов меню

Answer 1

@appdJava предложил хороший ответ. С другой стороны, вы можете также сделать следующее (не обязательно вызывать GetClass из MenuState, поэтому удалить скобка):

angular.module('portalDashboardApp') 
.directive('ogAdvertisingMediatracNav', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     templateUrl: '../scripts/directives/advertising_mediatrac_nav.html', 
     controller: function($scope, MenuState) { 
      $scope.getClass = MenuState.getClass; 
      } 
     } 
    }; 
}); 

Answer 2

Я действительно думаю, что проблема заключается в службе:

this.getClass = function(path) { 
var cur_path = $location.path().substr(0, path.length); 
if (cur_path === path) { 
if($location.path().substr(0).length > 1 && path.length === 1) 
    return ""; 
else 
    return "currentNav"; 
} else { 
return ""; 
} 

};

Ваша функция getClass нуждается в переменной «путь» и не применить эту переменную в вызове функции $scope.getClass = MenuState.getClass();

Answer 3

Это может работать для вас, делегируя вызов, как:

angular.module('portalDashboardApp') 
.directive('ogAdvertisingMediatracNav', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     templateUrl: '../scripts/directives/advertising_mediatrac_nav.html', 
     controller: function($scope, MenuState) { 
      $scope.getClass = function(path) { 
       return MenuState.getClass(path); 
      } 
     } 
    }; 
});