JQuery的角度指令內沒有檢測到DOM元素

Question

我有一個角指令與我的index.html文件我把一個Javascript的一端有一個簡單的代碼塊

<div> 
    <h1 class="dfaded">Hello World</h1> 
</div> 

現在鏈接模板功能

<script> 
$(document).ready(function() { 
    $('.dfaded').addClass("ahidden").viewportChecker({ 
     classToAdd: 'avisible animated fadeIn', 
     offset: 100 
    }); 
}); 
</script> 

但是此功能不起作用。在進一步調試時，即使我把一個簡單的功能，如

$('.dfaded').hide(); 

它仍然無法正常工作。現在，如果我把這個HTML塊放在指令的外面 - 一切正常。所以很有可能JQuery不會識別我在Angular Directive中加入的DOM元素。

在HTML頁面中加載了所有指令文件後，我添加了jquery文件。任何幫助將非常感激。

Answer 1

您的jQuery腳本在Angular過程之前運行並呈現模板文件。這就是你不應該像以前一樣在Angular項目中使用jQuery的原因之一。

爲了使其正常工作，將viewportChecker插件初始化包裝到自定義指令中。它可以看看例如像這樣：

app.directive('viewportChecker', function() { 
    return { 
     link: function(scope, element) { 
      element.addClass("ahidden").viewportChecker({ 
       classToAdd: 'avisible animated fadeIn', 
       offset: 100 
      }); 
     } 
    }; 
}); 

那麼你將這個指令重視必要標籤：

<div> 
    <h1 class="dfaded" viewport-checker>Hello World</h1> 
</div>