在 angularJS 应用程序文档就绪事件中运行 jquery 代码答案

【问题标题】：Run jquery code in angularJS app document ready event在 angularJS 应用程序文档就绪事件中运行 jquery 代码
【发布时间】：2017-08-28 11:23:18
【问题描述】：

我正在尝试在 Angular 应用程序中运行一些 jquery 代码，我尝试运行的代码涉及挂钩某些选择器/

$(document).ready(function () {
  Configuration.anchorToUseForMainSearch = $("#header_element")
}

这个选择器返回 "length: 0" 因为 DOM 还没有加载，我应该使用其他一些事件吗？

尝试使用这个：

angular.element(document).ready(function () {
        // Your document is ready, place your code here
});

但结果是一样的..

【问题讨论】：

元素#header_element会通过angular route/partial loading加载吗？
@Koushik Chatterjee 。不。 jquery 代码将从挂钩到 Angular 应用程序的外部项目中运行
澄清一下，您的意思是文档选择器？
将 MutationObserver 添加到 body，找到元素后，删除观察者
@JeffHoward- 是的

标签： javascript jquery asp.net angularjs

【解决方案1】：

您可以为此创建一个指令并设置执行代码的超时时间。

【讨论】：

jquery 代码将从挂钩到 Angular 应用程序的外部项目中运行，因此我无法将其作为外部应用程序的指令。常规文档准备好了吗？

【解决方案2】：

我想说的是，你走错了路。 Angular 方式会避免使用 jQuery。如果您绝对必须，我建议您将它放在附加到主模块的 .run() 中。我希望文档在此功能触发时“准备就绪”。

angular.module('myApp', [])
  .run(function myAppRunFn() {
     // commit sins here. 
  });

在此处记录： https://docs.angularjs.org/guide/module

【讨论】：

jquery 代码将从挂钩到 Angular 应用程序的外部项目（不是 Angular 应用程序）中运行。所以我无法使用这个答案..

【解决方案3】：

var target = $("#wrapperDiv")[0]; //or document.body when you not sure
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if($(mutation.addedNodes).filter('#header_element').length) {
        //code for what you want here
        console.log("Item added to DOM");
    }  
  });   
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true, subtree: true };
 
// pass in the target node, as well as the observer options
observer.observe(target, config);

setTimeout(function(){
    console.log('Adding Element from some other code');
    $("#innerDiv").append("<div id='header_element'>");
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrapperDiv">

    <div id="innerDiv">
    
    </div>

<div>

【讨论】：