Question

我已经使用angularjs构建了一个应用程序，并根据正在加载的视图创建了菜单指令。

这是我的菜单指令的结构：

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函数检查当前位置并将其与ng-class =＆＃34; getClass（＆＃39; / section1_volume＆＃39;）＆＃34;中定义的路径进行比较。在li元素上并将currentNav类附加到当前页面。

现在我有一大堆这些菜单指令，并且不想总是在每个指令中复制相同的功能，所以我按如下方式设置服务：

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：无法读取属性＆＃39; length＆＃39;未定义的

我认为这是因为路径变量没有被传递给我的服务但是我不确定如何让这个服务通过遍历各种ng-class =＆＃34; getClass（＆＃39; /路径名＆＃39;）＆＃34;＆GT;菜单模板的各个部分

Answer 1

通过将呼叫委派为：

，这可能对您有用

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);
           }
       }
   };
});

Answer 2

@appdJava提出了一个很好的答案。或者，您也可以执行以下操作（无需调用MenuState的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;
           }
       }
   };
});

Answer 3

我认为问题在于您的服务：

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需要一个变量＆＃39;路径＆＃39;并且您不会在函数调用$scope.getClass = MenuState.getClass();

中应用此变量

在指令中使用服务（angularjs）

3 个答案: