angular.element
描述:
包裹着一部分DOM element或者是HTML字符串,把它作为一个jQuery元素来处理。(类似于jQuery的选择器啦)
如果jQuery被引入了,则angular.element就可以看作是jQuery选择器,选择的对象可以使用jQuery的函数;如果jQuery不可用,angular.element只能接受HTML字符串或者DOM元素为参数,选择的元素只可以调用Angular中嵌入的精简版的jQuery library(名为: "jQuery lite" or "jqLite").
注意: 所有被Angular引用的元素都是jQuery或者jqLite对象,不是原始的DOM元素了。
返回值:
jQuery对象
示例代码:
示例1. 不引入jQuery
<!DOCTYPE HTML> <html ng-app="elementExample"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="angular.min.js"></script> </head> <body> <div id="test">博弈网络科技</div> 使用html字符串为参数 <input type="button" onclick="button1()" value="button1"></input></br> 使用DOM元素作为参数 <input type="button" onclick="button2()" value="button2"></input> <script> //使用html字符串为参数 function button1(){ alert(angular.element('<div id="test">博弈网络科技</div>').html()); } //使用DOM元素作为参数 function button2(){ var a = document.getElementById('test'); alert(angular.element(a).html()); } </script> </body> </html>
示例2. 引入jQuery
<!DOCTYPE HTML> <html ng-app="elementExample"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery-1.7.2.min.js"></script> <script src="angular.min.js"></script> </head> <body> <div id="test">博弈网络科技</div> 使用选择器获取对象 <input type="button" onclick="button1()" value="button1"></input></br> <script> //使用html字符串为参数 function button1(){ alert(angular.element('#test').html()); } </script> </body> </html>
补充:
jqLite支持的jQuery函数有:
addClass()
after()
append()
-
attr()
- Does not support functions as parameters -
bind()
- Does not support namespaces, selectors or eventData -
children()
- Does not support selectors clone()
contents()
-
css()
- Only retrieves inline-styles, does not callgetComputedStyle()
data()
detach()
empty()
eq()
-
find()
- Limited to lookups by tag name hasClass()
html()
-
next()
- Does not support selectors -
on()
- Does not support namespaces, selectors or eventData -
off()
- Does not support namespaces or selectors -
one()
- Does not support namespaces or selectors -
parent()
- Does not support selectors prepend()
prop()
ready()
remove()
removeAttr()
removeClass()
removeData()
replaceWith()
text()
toggleClass()
-
triggerHandler()
- Passes a dummy event object to handlers. -
unbind()
- Does not support namespaces val()
wrap()
angular还提供了一下额外的方法和事情(有无jQuery都适用)
事件:
$destroy: 当jqLite/jQuery DOM对象被销毁是促发。
方法:
controller(name)
injector()
scope()
isolateScope()
inheritedData()
相关推荐
element.css('background-color', 'red'); ``` 在实际开发中,你可能会遇到需要批量处理多个元素的情况,比如处理一组单选按钮(radio buttons)。在这种情况下,可以使用选择器来选取这些元素: ```javascript ...
在AngularJS中,`angular.element()` 是一个核心功能,它是一个包装了jQuery或jqLite的函数,用于操作DOM元素。这篇文章将深入探讨AngularJS获取元素的方法以及`angular.element()`的使用。 1. **angular.element()...
`angular.element`是AngularJS框架中的一个核心工具,它提供了类似于jQuery的功能,允许开发者操作DOM元素。以下是对`angular.element`方法的详细说明: 1. `addClass(className)`: 这个方法用于向匹配的元素添加...
angular-atomic-notify, angular.js 应用程序的原子咆哮通知 angular-atomic-notify一个用于显示通知的AngularJS模块 依赖项我们使用这个库作为示例,注意jQuery用于 angular.element 和 Font Awesome 图标,但是你...
在Angular.js中,可以使用angular.element()方法来包装window对象,并绑定load事件。这样做可以确保在所有资源加载完成之后执行特定的函数。示例如下: ```javascript angular.element(window).bind('load', ...
Angular 命名空间 ng (核心模块) 这个模块是默认提供的,它包含了AngularJS的核心组件。 Directives 这些核心指令集可用于你的AngularJS应用的模板...例如:angular.copy(), angular.equals(), angular.element()...
angular.extend angular.equals angular.forEach angular.noop angular.bind angular.fromJson angular.identity angular.isUndefined angular...isFunction angular.isObject angular.isNumber angular.isElement
bootstrap函数的调用方式为angular.bootstrap(element, [modules], [config]),其中element参数表示要引导应用的DOM元素,modules参数为应用所需的模块名称数组,config参数是可选的配置对象。需要注意的是,...
使用angular.element()获取一个dom的方法。 1.可以使用jquery的选择器 2.可以使用javascript的原生查找元素的方法 下面是angular.element()提供的方法 <input type=checkbox class=input /> <input ...
link: function(scope, element, attrs) { // 监听服务变化,更新视图 scope.$watch(function() { return paginationService.currentPage; }, function() { // 更新分页导航条UI }); } }; }); // 控制器 app...
angular.element(document).ready(function () { angular.bootstrap(document.getElementById("test11"), ["myApp"]); }); 2、控制器末尾加入: .config(function ($sceProvider) { $sceProvider.enabled(false)...
以下是一个简单的例子,展示了如何在`link`函数中使用`angular.element`来操作DOM: ```javascript webApp.directive("detailTopStick", ["$timeout", "$window", function ($timeout, $window) { return { ...
Suave UI 是一个基于 AngularJS 开发的 Web UI... angular.element(document).ready(function () { angular.bootstrap(document, ['your-app', 'suave-ui']); }); [removed] 标签:Suave CSS框架
在Angular.js中,指令是构建可复用组件和复杂用户界面的核心工具。它们允许开发者扩展HTML,赋予HTML新的语义,以实现动态行为和数据绑定。这篇教程将深入讲解Angular.js指令的一些重要属性,帮助你更好地理解和应用...
- `angular.element()`: 将DOM元素转换为jQuery对象。 - `angular.module()`: 创建或获取模块实例。 这些知识点覆盖了AngularJS的核心功能,是初学者从入门到熟练使用AngularJS进行开发的重要基础。文档还提到了...