element.find（ 'li'）が結果と一致しません

Question

toStateがui-srefの値に一致するとliのスタイルプロパティを変更するangularJS指示があります。

何らかの理由により、element.find('li')は私に空の結果をもたらします。

navbar.js

<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> 

_navbar.html

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

私が間違って何をやっている：ここで私は私のコードを貼り付け、以下の？ the documentationから

Answer 1

：

注：この関数は、タグ名/ CSSセレクタによって要素を見つけることができませんことを覚えておいてください。タグ名による検索の場合は、代わりにangular.element(document).find(...)または$document.find()を入力するか、標準のDOM APIを使用してください（例： document.querySelectorAll()。

Answer 2

私は答えを見つけたので、私は何をしようとしているのか、どのように解決したのか説明しようとしています。基本的に2つの問題がありました。

$stateChangeSuccessと$rootScopeとng-includeという問題がありました。指令がプロセスを開始したとき、ng-includeはロードを完了していませんでした。

このように問題を解決するには、コンテンツが読み込まれるまで待つ必要があるので、$timeoutを考えてください。 <ng-include src="#"></ng-include>：要素の代わり<ANY ng-include="#"></ANY>：

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を使用することが関連していました。 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> 

、私はまだそれが仕事やない可能属性と要素間のスワップ理由については考えているが、このコードは魔法のように動作します！