element.find('li') 与任何结果都不匹配

Question

我有一个angularJS指令，该指令在toState匹配ui-sref值时更改li样式属性。

由于某种原因，element.find('li')为我带来了一个空的结果。在这里，我粘贴了我的代码：

navbar.js

navbar.directive('appNavbar', [ function () {
  return {
    restrict: 'E',
    link: function ($state, element) {
      $state.$on("$stateChangeSuccess", function (event, toState) {
        console.log(element.find('li')); // here is comming an empty value
        angular.forEach(element.find('li'), function (a, i) {
          // li css change stuff
        });
      });
    }
  };
}]);

_navbar.html

<app-navbar ui-view="navbar">
  <div class="nb-main">
    <ul id="list-nav" class="list-navbar">
      <li ng-include="'svg/navbar-home.svg'" ui-sref="base.home"></li>
      <li ng-include="'svg/navbar-discover.svg'" ui-sref="base.discover"></li>
      <li ng-include="'svg/navbar-discover.svg'" ui-sref="base.discover"></li>
    </ul>
    <div class="nb-img line-navbar"></div>
  </div>
</app-navbar>

我在做什么错？

Answer 1

来自文档：

注意：请记住，此功能不会通过标签名称/CSS选择器找到元素。对于按标签名称查找，请尝试使用angular.element(document).find(...)或$document.find()，或使用标准DOM API，例如document.querySelectorAll()。

Answer 2

自从找到答案以来，我正在回答自己，试图解释我试图做的事情以及如何解决它的行为。基本上，有两个问题：

第一个问题与$rootScope和ng-include的$stateChangeSuccess有关。指令启动其流程时，ng-include尚未完成其加载。

以这种方式解决问题应该在$timeout上考虑，因为您必须等到内容加载。

navbar.directive('appNavbar', [ '$timeout', function ($timeout) {
  return {
    restrict: 'E',
    link: function ($state, element) {
      $timeout(function () {
        $state.$on("$stateChangeSuccess", function (event, toState) {
          console.log(element.find('li')); // here is comming an empty value
          angular.forEach(element.find('li'), function (a, i) {
            // li css change stuff
          });
        });
      });
    }
  };
}]);

第二个与使用ng-include作为属性有关：<ANY ng-include="#"></ANY>而不是元素：<ng-include src="#"></ng-include>。在不更改directive中的任何内容的情况下，此代码解决了问题：

<div class="nb-main">
  <ul class="list-navbar">
    <li ui-sref="base.home">
      <ng-include src="'svg/navbar-home.svg'"></ng-include>
    </li>
    <li ui-sref="base.home">
      <ng-include src="'svg/navbar-interaction.svg'"></ng-include>
    </li>
    <li ui-sref="base.home">
      <ng-include src="'svg/navbar-discover.svg'"></ng-include>
    </li>    
  </ul>
  <div class="nb-img line-navbar"></div>
</div>

我仍然不知道为什么在属性和元素之间交换是否可以工作，但是此代码就像魅力一样工作！