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

如何从Custom Directive获取链接href？

1 个答案: