`
boyitech
  • 浏览: 84292 次
  • 性别: Icon_minigender_1
  • 来自: 南通
社区版块
存档分类
最新评论
阅读更多

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元素了。
使用方法:
    angular.element(element)
参数详解:
Param Type Details
element stringDOMElement

HTML字符串或者是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 call getComputedStyle()
  • 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()
 
1
0
分享到:
评论

相关推荐

    通过angular.element,变成jquery对象,改样式

    通过angular.element,转变成jquery对象,改变样式!

    详解angularjs获取元素以及angular.element()用法

    本篇文章主要介绍了详解angularjs获取元素以及angular.element()用法 ,具有一定的参考价值,有兴趣的可以了解一下

    angular.element方法汇总

    本文主要给大家汇总了一下angular.element的方法,十分的详细,这里推荐给大家 参考下。

    angular-atomic-notify, angular.js 应用程序的原子咆哮通知.zip

    angular-atomic-notify, angular.js 应用程序的原子咆哮通知 angular-atomic-notify一个用于显示通知的AngularJS模块 依赖项我们使用这个库作为示例,注意jQuery用于 angular.element 和 Font Awesome 图标,但是你...

    Angular.JS通过指令操作DOM的方法

    为了便于DOM操作,AngularJS内部封装了angular.element,如果现有项目中已经引入的jQuery,angular.element相当于jQuery函数的别名,否则,angular.element代表AngularJS对jQuery封装的一个子集,称为”jQuery lite...

    AngularJS 中文手册

    Angular 命名空间 ng (核心模块) 这个模块是默认提供的,它包含了AngularJS的核心组件。 Directives 这些核心指令集可用于你的AngularJS应用的模板...例如:angular.copy(), angular.equals(), angular.element()...

    ng-utils:角度实用函数的 CommonJS 包装器(angular.forEach、angular.isString 等)

    angular.extend angular.equals angular.forEach angular.noop angular.bind angular.fromJson angular.identity angular.isUndefined angular...isFunction angular.isObject angular.isNumber angular.isElement

    详解angular element()方法使用

    使用angular.element()获取一个dom的方法。 1.可以使用jquery的选择器 2.可以使用javascript的原生查找元素的方法 下面是angular.element()提供的方法 &lt;input type=checkbox class=input /&gt; &lt;input ...

    Angular.js中[removed](),$(document).ready()的写法浅析

    一,问题发现: 最近公司有个微信公众号项目,为了方便直接使用anular.js+ionic进行开发,...1使用angular.element [removed] angular.element(window).bind('load', function() { alert&#40;加载完毕&#41;; }); aler

    AngularJs兼容IE6-IE7-IE8

    angular.element(document).ready(function () { angular.bootstrap(document.getElementById("test11"), ["myApp"]); }); 2、控制器末尾加入: .config(function ($sceProvider) { $sceProvider.enabled(false)...

    基于AngularJS的UI框架SuaveUI.zip

    Suave UI 是一个基于 AngularJS 开发的 Web UI... angular.element(document).ready(function () {  angular.bootstrap(document, ['your-app', 'suave-ui']);  }); [removed] 标签:Suave CSS框架

    angular-duScroll-Animate:angular-duScroll-Animate

    请注意, $document是一个angular.element ,有关用法示例,请参见下文。 如果发生名称冲突,将保留现有的jQuery或jqlite函数,只需使用带前缀的版本:即.duScrollTo()而不是.scrollTo() 。 .scrollT

    angular-scroll-website

    该模块使用一些类似 jQuery 的函数扩展了angular.element对象。 请注意, $document是一个angular.element ,用法示例见下文。 在名称冲突的情况下,现有的 jQuery 或 jqlite 函数将被保留,只需使用前缀版本:即....

    angularjs-eslint:[已弃用] AngularJS 应用程序的 ESLint 规则

    angular.element 方法应该用于 $ 或 jQuery 对象(当然,如果您使用的是 jQuery)。 如果导入了 jQuery 库,angular.element 将是 jQuery 对象的包装器。 ng_controller_name 您的所有控制器都应该有一个名称,以...

    angular-simple-permission:用于管理权限的 Angular 模块

    element ( document ) . ready ( function ( ) { $ . ajax ( { url : '/api/get_user_permission' , type : "GET" , dataType : 'json' } ) . then ( function ( data ) { for ( var i = 0 ; i &lt; data . ...

    angular-media-query-handler:根据屏幕大小更改类的指令

    #angular-media-query-handler 这个包包含两个指令: 更改媒体查询类元素... angular.element($window).bind('resize', function() { $rootScope.windowWidth = $window.outerWidth; $rootScope.$apply('windowWidth')

    angular-css-element-queries:CSS元素为“ Angular.js 1.x”查询“ polyfill”

    角度css元素查询CSS元素为“ Angular.js 1.x”查询“ polyfill”这是一项早期工作,目前,我正在尝试使用最适合此类库的编译器,打包器和程序包管理器。

    Angularjs 基础入门

    1.angular.element 2.angular.Bootstrap 我们非常清楚ng-app应用到节点,angular自动帮你初始化,初始化的过程分为如下几个步骤 1.angular会在document load的时候自动初始化,首先会找到ng-app这个指令指定的节点。...

Global site tag (gtag.js) - Google Analytics