如何从自定义指令获取链接href？

Question

我是AngularJS的新手。 我正在动态加载页面，效果很好。 每个页面都有与之关联的唯一颜色。 当用户导航到页面时，我需要用该唯一的颜色突出显示页面中的项目。 我认为该功能的HTML如下所示：

<ul id="nav" class="nav navmenu-nav">
  <li ng-repeat="page in $myPages.allPages" use-custom-color>
    <a ng-href="#{{page.url}}"> <i class="{{page.icon}}">&nbsp;</i><span>{{page.name}}></span></a>
  </li>
</ul>

为了尝试创建将用自定义颜色突出显示所选导航项目的指令，我具有以下内容：

.directive('useCustomColor', [
  function() {
    return {
      restrict: 'A',
      controller: [
        '$scope', '$element', '$attrs', '$location', '$myPages',
        function($scope, $element, $attrs, $location, $myPages) {
          var route = function() {
            return $location.path();
          };

          var setSelected = function(path) {  
            return angular.forEach($myPages.allPages, function(page) {
              if (page.url === path) {
                // find the matching link
                angular.forEach($element.find('a'), function(link) {
                  var $link = angular.element(link);
                  console.log(link);
                  console.log($link);
                  console.log($link.href);
                });
              }
            });
          };

          return $scope.$watch(route, function (newVal, oldVal) {
            return setSelected($location.path());
          });
        }
      ]
    };
  }
])

奇怪的是，当调用setSelected时，我无法获得锚标记的href值。 我需要那个价值。 但是，我是否可以在li中获得链接的href？

谢谢！

Answer 1

angular.element是jQuery函数的别名。 您应该执行以下操作：

$link.attr('href');

1. https://docs.angularjs.org/api/ng/function/angular.element
2. http://api.jquery.com/attr/