angular中实现jQuery的Document Ready
angular中不推荐混用JQuery的,原因呢问度娘。
其实这是一个比较蛋疼的问题,尤其是angular2.0,尽量不要在页面上写js,用ts写到模块里面去吧。。
汲取各位先人的智慧,还是列一下
window.onload(),$(document).ready()在angular中要怎么写:
1,html中直接写(请自行引用angular.js,否则2.0的页面中是不带有angular对象的)
<script src="lib/angular/angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
angular.element(window).bind('load', function() {
alert('');
});
alert('');
</script>
不建议,直接在模板里面,写js代码。
2,在controller里面利用$on或者$watch
bookControllers.controller('bookctrl_test', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.$on('$viewContentLoaded', function() {
alert('');
});
alert('');
}]);
bookControllers.controller('bookctrl_test1', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.$watch('$viewContentLoaded', function() {
alert('');
});
alert('');
}]);
3,利用data-ng-init
<div ng-controller="test">
<div data-ng-init="load()" ></div>
</div>
注意:data-ng-init在controller里面才会启作用
bookControllers.controller('testInit', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.load = function() {
alert('code here');
}
}]);
好了,去学学TypeScript(ts)的语法吧!
angular中实现jQuery的Document Ready的更多相关文章
- jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解
1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...
- jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解 ----转载
1.(function($) {-})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...
- jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详解
1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...
- jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别讲解
1.(function($){...})(jQuery); (1).原理: 这实际上是匿名函数,如下: function(arg){...} 这就定义了一个匿名函数,参数为arg:而调用函 ...
- jQuery的document ready与 onload事件——你真的思考过吗?
在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是do ...
- jQuery之$(document).ready()使用介绍
学习jQuery的第一件事是:如果你想要一个事件运行在你的页面上,你必须在$(document).ready()里调用这个事件 学习jQuery的第一件事是:如果你想要一个事件运行在你的页面上,你必须 ...
- jQuery:$(document).ready()用法
jQuery:$(document).ready()用法 $(document).ready() 方法允许我们在文档完全加载完后执行函数;
- jsp中的javascript的$(document).ready( function() { $("#loginForm").validate()
转自:https://bbs.csdn.net/topics/392459787?list=71147533 下面是jsp页面中的JavaScript代码 $(document).ready( fun ...
- jq方法中 $(window).load() 与 $(document).ready() 的区别
通过自学进入了前端的行列,只知道在js中,一开头就写一个: window.onload = function(){ //doing sth} 然后所有的乱七八糟的代码全塞里面,大概知道window.o ...
随机推荐
- forEach、map、 for-in 、 for 、some 对比 break
map.forEach 乱用 ,被嫌弃,现整理区别 补补基础 Array 迭代方法 1. every(): 对数组中的每一项运行给定函数,如果该函数对每一项都返回true ,则返回true. 2. f ...
- Oracle JDBC通过占位符可以查询可变长字段,不可查询固定长度字段
这个问题在半年前,花了我两天的时间才解决,现在刚好想起来,顺便记录一下以防忘了. 通过jdbc,预编译的sql,无法查询到固定长度的字段. 用例子说话: 创建一个表,只有一个字段,长度为固定的char ...
- Webstorm 不识别es6 import React from ‘react’——webstorm不支持jsx语法怎么办
2016-10-31更新 webstorm不支持es6语法怎么办? webstorm不支持jsx语法怎么办? 参考:webstorm不支持jsx语法怎么办 I spent ages trying to ...
- JS操作CSS样式
一.样式表(css) 使用样式表可以更好的显示WEB文档,也可以结合javascript从而实现很好的控制样式表. 样式(css)与内容(html): HTML是处理文档结构的,HTML可以实现如何把 ...
- 【JAVA错误笔记】 - Unable add facets project AnnotationWebService CXF 2-x Web Services
错误描述: 创建webservice接口服务时候提示: Unable add facets project AnnotationWebService CXF 2-x Web Services Unab ...
- Javase中多态polymorphic的简单介绍
-------------多态----------------- (1)面向对象三大核心思想: 1.封装 2.继承 3.多态 (2)多态定义:父类的引用指向子类的对象. (3)引用指的是父 ...
- RS485接线 - 为什么要给2线制RS485接3根线?
http://www.chipkin.com/rs485-cables-why-you-need-3-wires-for-2-two-wire-rs485/ RS485needs 3 conducto ...
- mongodb下载及安装配置教程【仅供参考】
1 下载 下载页面地址:https://www.mongodb.org/downloads 版本选择:电脑系统是64位的,所以我选择了 Windows 64-bit 2008 R2+ ,msi包 2 ...
- javascript document对象 第21节
<html> <head> <title>DOM对象</title> <style type="text/css"> t ...
- IntelliJ IDEA14 和 Maven 系列:使用IntelliJ IDEA 14和Maven 7 创建java web项目(一)
Intellij IDEA作为最好的Java IDE,创建Maven项目还是比较简单的,但是创建一个Maven Web项目还是要修改一些配置的,下面进行总结整理. 1前言 在创建项目中,IDEA提供了 ...