4

Jqueryプラグインを使用してAngularJSディレクティブでDOMを操作しようとしています。

AngularJsがフルバージョンのJqueryを使用しているかどうかはわかりませんが、フルバージョンのスクリプトがヘッドにあり、AngularJsスクリプトが本体にあるため、理論的にはAngularJSはフルバージョンを使用する必要があります。ただし、ディレクティブ内のログエントリには何も選択されていないことが示されます。Chromeコンソール内のまったく同じ構文は、ul内のすべてのliを返します。

これがHTMLです

<ul id="myUl"  class="gallery unstyled">
    <li class="galleryitem" ng-repeat="i in images">
        <a href="{{i.LargeImage.URL}}"><img ng-src="{{i.MediumImage.URL}}" /></a>
    </li>
</ul>

指令

.directive('gallery',function() {
    return {
        restrict : 'C',
        link : function postLink(scope, iElement, iAttrs) {
        console.log($(".gallery li"));
      }
    }
   }

PS：私はちょうど気づきました

console.log($(".gallery"));

liを含むulを返しますが、返しません

console.log($(".gallery li"));

フルバージョンがロードされていないと思います。

4

2 に答える 2

5

jQuery は読み込まれます$('.gallery')が、リンク関数を呼び出すとき、ng-repeater式はまだ評価されていないため、その時点ではそれらのli要素はすべて DOM にありません。実験のために、セレクターを呼び出す前に遅延を追加できます

setTimeout(function(){
  console.log($(".gallery li"));
}, 1000);

次に、が評価された後に DOM を照会しているため、すべてのli要素を取得します。これが、コンソールからノードng-repeaterを選択して実行することが機能する理由です。li

続行する前に、ライブラリがロードされたときに angular が jQuery を使用すると言われている場合は、angular.elementセレクターを実装し、ディレクティブ内の要素への参照で jQuery メソッドが使用可能であることを意味します。推奨事項は、ディレクティブの要素のコンテキストでDOM を操作することです 

iElement.find('li')    // instead of $('.gallery li')

DOM を変更するにはどうすればよいのでしょうか。まあ、それはあなたが達成しようとしていることによって異なります。すべてがngRepeaterliでレンダリングされた後に DOM を操作したいので、リピーターの最後のアイテムがいつレンダリングされるかをチェックする特別なディレクティブを使用したい場合があります。checkLast$lasttrue

これは、このGoogle グループ ディスカッションの誰かからのjsfiddleです。

$watchまたは、一部のスコープ プロパティを変更することもできます。

于 2012-12-17T00:28:25.677 に答える
0

私のような答えを探している人は、これを試してください

    .directive('gallery',function() {
        return {
            restrict : 'C',
            link : function postLink(scope, iElement, iAttrs) {
                iElement.ready(function(){
                    console.log($(".gallery li"));
                });        
            }
        }
    }

このようにして、iElement が dom 操作の準備ができていることを保証できます。

于 2014-06-18T20:58:44.963 に答える