Question

我有angularJS指令，当li与toState值匹配时，会更改ui-sref样式属性。

由于某种原因，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

来自the documentation：

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

Answer 2

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

第一个问题与$stateChangeSuccess和$rootScope的{{1}}有关。当指令启动其过程时，ng-include没有完成其加载。

以这种方式解决问题应考虑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

我仍然不知道为什么在属性和元素之间进行交换会使其工作与否，但这段代码就像魅力一样！

element.find（'li'）与任何结果都不匹配

2 个答案: