Angular External js library calling Document.Ready
https://stackoverflow.com/questions/51094841/angular-external-js-library-calling-document-ready
Step 1
Check if the external library is available on npm. If so you may be able to import the desired function rather than altering a vendored file.
For example, it may provide an API such that:
YourTsComponent.ts
const CallMe = require('library').CallMe
// or
import { CallMe } from 'library'
// on route change
CallMe()
If something like that is available, great, otherwise...
Step 2
Confirm your theory with a global (attach CallMe
to window temporarily). If your theory is correct, you should be able to get the desired behavior by calling this global variable on route change.
Tester.js
(function($) {
"use strict";
$(document).ready(function() {
CallMe();
});
function CallMe() {
console.log('HEY I GOT CALLED');
}
// TODO - remove (test only)
window._CallMe = CallMe
})(jQuery);
YourTsComponent.ts
// on route change
window._CallMe()
If that doesn't work, you must reevaluate your theory.
but if it does ...
Step 3
Convert the vendored library to a module that can be consumed by your app. Your mileage may vary based on what (if any) module system you are using. For example, if you are using require.js:
Tester.js
(function(factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// CommonJS
factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function($) {
"use strict";
function CallMe() {
console.log('HEY I GOT CALLED');
}
$(document).ready(function() {
CallMe();
});
return CallMe
}));
YourTsComponent.ts
const CallMe = require('/path/to/tester.js')
// on route change
CallMe()
If you're not keen on re-writing a vendored library
You may consider overriding .ready
's default behavior so that it may be retriggered. There Are a few answers here if you want to go this route, but be warned, overriding default jQuery behavior is probably much more error prone than editing a single vendored file.
Angular External js library calling Document.Ready的更多相关文章
- angular中实现jQuery的Document Ready
angular中不推荐混用JQuery的,原因呢问度娘. 其实这是一个比较蛋疼的问题,尤其是angular2.0,尽量不要在页面上写js,用ts写到模块里面去吧.. 汲取各位先人的智慧,还是列一下 w ...
- js中的document.ready
1.概念 表示在dom结构绘制完成后执行,可能DOM元素关联的部分并未加载完 2.写法 $(document).on("ready",function(){ }) $(docume ...
- $( document ).ready()&$(window).load()
$( document ).ready() https://learn.jquery.com/using-jquery-core/document-ready/ A page can't be man ...
- JQuery官方学习资料(译):$( document ).ready()
一个页面直到document是”ready“才能被安全的操作,Jquery为你检查这种状态.代码包含在$( document ).ready()的内部将会仅仅运行一次在页面Document ...
- window.onload与$(document).ready()
window.onload是原生JS事件,$(document).ready()是Jquery实现的与其作用类似的事件. 二者区别如下: 1.执行时间不同 $(document).ready()是DO ...
- 细说document.ready和window.onload
原文 简书原文:https://www.jianshu.com/p/bbf28d61aa1f 大纲 1.对页面加载的认识 2.关于document.ready() 3.关于document.onloa ...
- JS的window.onload与JQuery的$(document).ready(function(){})的区别
前段时间去面试被问及JS的加载(onload)与jQuery中加载(ready)方法的区别,瞬时懵逼了,关于这个知识点平时还真没怎么注意. 最近先来无事便查了一下资料, onload 事件(W3c上给 ...
- JS 页面加载触发事件 document.ready和window.onload的区别
document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...
- 菜鸟学JS(五)——window.onload与$(document).ready()
我们继续说JS,我们常常在页面加载完成以后做一些操作,比如一些元素的显示与隐藏.一些动画效果.我们通常有两种方法来完成这个事情,一个就是window.onload事件,另一个就是JQuery的read ...
随机推荐
- 关于ARM立即数的理解
转自:http://blog.sina.com.cn/s/blog_9bad4f090101e14d.html 一.立即数指令码的组成 ARM公司将32bit指令码分为如下两部分: 32bit立即数通 ...
- js 动画性能分析 transfrom
1.动画实现代码 (1)使用定位实现: <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- CSS3 GPU硬件加速
1.代码(未添加GPU加速代码) <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...
- Ubuntu解压缩zip,tar,tar.gz,tar.bz2
ZIP zip可能是目前使用得最多的文档压缩格式.它最大的优点就是在不同的操作系统平台,比如Linux, Windows以及Mac OS,上使用.缺点就是支持的压缩率不是很高,而tar.gz和tar. ...
- 〖Linux〗zigbee实验之cc2430移植tinyos2.x的步骤(Ubuntu13.10)
开发环境:Ubuntu13.10 1. 添加源,并安装tinyos-2.11:sudo gedit /etc/apt/sources.list #往里边添加deb http://tinyos.sta ...
- html中文乱码问题的解决
当我试着用html写代码的时候,发现直接保存的文件用浏览器打开时中文显示是乱码的,所以我找了一些解决方法,可是原因不太明白,所以我也就不解释了,能够自己找找原因,以下提供解决方法: 在写的html的第 ...
- str.format格式化用法(通过{}来替代%)
# -*- coding: utf-8 -*- #python 27 #xiaodeng #str.format格式化用法(通过{}来替代%) ''' >>> help(format ...
- (转)Content-Disposition的使用和注意事项
最近不少Web技术圈内的朋友在讨论协议方面的事情,有的说web开发者应该熟悉web相关的协议,有的则说不用很了解.个人认为这要分层次来看待这个问 题,对于一个新手或者刚入门的web开发人员而言,研究协 ...
- iOS利用SDWebImage实现缓存的计算与清理
概述 可以仅仅清理图片缓存, 也可以清理所有的缓存文件(包括图片.视频.音频等). 详细 代码下载:http://www.demodashi.com/demo/10717.html 一般我们项目中的缓 ...
- mybatis标签之——关联映射
关联关系是面向对象分析.面向对象设计最重要的知识.合理的关联映射将大大简化持久层数据的访问.关联关系大致分为以下三类: 一对一 一对多 多对多 1. 一对一 一对一关系推荐使用唯一主外键关联,即两张表 ...