angular js 各种功能函数介绍

最新推荐文章于 2024-02-12 10:00:00 发布

果冻剑客

最新推荐文章于 2024-02-12 10:00:00 发布

阅读量5.2k

点赞数 2

分类专栏： angular js 文章标签： angular javascript 函数功能

本文链接：https://blog.csdn.net/ios_king/article/details/52062324

版权

angular js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

把angular js 的一些功能函数记录下来，就相当于做做笔记！！

1.angualar.bind ：将对象绑定进函数中,

如：

 
 var 
 obj = { name:  
 "Any" 
 }; 

 
 var 
 fn =  
 function 
 (Adj) { 

 
    
 console.log( 
 this 
 .name +  
 "is a boy!!! And he is " 
  + Adj +  
 " !!!" 
 ); 

};

 
 var 
 f = angular.bind(obj, fn,  
 "handsome" 
 ); 

 
 f(); 
 //Any is a boy!!! And he is handsome!!! 

第一个参数为对象，第二个为要绑定的函数，第三个为可选是传到函数中的参数。

2.angular.bootstrap ： 可用于模块的手动加载。

  <body>
    <div id="div2"  ng-controller="controller2">div2:{{name}}</div>
  </body>
var m2 = angular.module('moudle2', []);
    m2.controller("controller2",function($scope){$scope.name="aty"});
    
    // 页面加载完成后,再加载模块
    angular.element(document).ready(function() {
      angular.bootstrap(document.getElementById("div2"),["moudle2"]);
    });

3.angular.copy : 用于对象和数组的复制。

angular.copy(source, [destination]);

source：为数据源（要复制的东西）

destination：为目的地。（可以为数组或者对象）

4. angular.element

angular 中内置了一个jquery 的子集jqLite。

jqLite的jQuery是一个微小的，API的兼容子集，允许角操纵一个跨浏览器兼容的方式DOM。jqLite具有一个非常小的足迹的目标只实现了最常用所需的功能

angular.element 可以传入dom 元素返回一个jquery 对象。

angular.element(document).css("class","isChen");

注：该子集jqLite 仅支持一下方法:

addClass() - 不支持一个函数作为第一个参数
after()
append()
attr() - 不支持函数作为参数
bind() - 不支持命名空间，选择或EVENTDATA
children() - 不支持选择
clone()
contents()
css()-只检索直列风格，不叫。作为一名二传手，没有数字转换为字符串或追加“PX”，也没有自动属性前缀。getComputedStyle()
data()
detach()
empty()
eq()
find() - 通过标签名限于查询
hasClass()
html()
next() - 不支持选择
on() - 不支持命名空间，选择或EVENTDATA
off() - 不支持命名空间，选择或事件对象作为参数
one() - 不支持命名空间或选择
parent() - 不支持选择
prepend()
prop()
ready()
remove()
removeAttr()
removeClass() - 不支持一个函数作为第一个参数
removeData()
replaceWith()
text()
toggleClass() - 不支持一个函数作为第一个参数
triggerHandler() - 通过一个虚拟事件对象来处理
unbind() - 不支持命名空间或事件对象作为参数
val()
wrap()

都是jquery 的函数，不懂自已看文档，我就不说了。

5.angular.equals

确定两个对象或两个值是相等的。支持值类型，正则表达式

比较两个值是要值相等类型相当才返回true，

比较两个对象的话是用angular.equals 比较其属性才判断。

6.angular.extend()

方法可以把一个或多个对象中的方法和属性扩展到一个目的对象中，使得这个对象拥有其他对象相同的方法和属性，angular.extends()方法的第一个参数是要被扩展的对象，后面可以传入一个或多个对象。

如： angular.extend($scope.human, $scope.baby, $scope.adult);

$scope.human.lover.love = function()
{
console.log("I hate you!");
}
<!-- 这两行都会输出“I hate you !"，可怜的adult对象,
他把自己的lover分享给了human! -->
$scope.human.lover.love();
$scope.adult.lover.love();

因为human 扩展了adult 的属性，即是 human 引用了adult 对象。分享了他的属性。。

7.angular.foreach 迭代器，这个大家应该很熟悉吧

例子：

var values = {name: 'misko', gender: 'male'};
var log = [];
angular.forEach(values, function(value, key) {
  this.push(key + ': ' + value);
}, log);

第一个参数为迭代的对象获取数组。

第二个为迭代函数。

8.angular.fromJson();

将json 字符串反序列化为对象，或者数组

9.angular.toJson

将对象获取数组序列化为字符串。

10.angular.injector

可用于创建一个injector对象, 调用injector对象的方法可以获得angular的service, 或者用来做依赖注入.

使用方法:

angular.injector(modules, [strictDi])

参数详解:

Param Type Details

modules

Array.<string|Function>

一组module或者他们的别名. ng module需要显示地申明出来.

strictDi

(optional)

boolean

Injector需不需要使用严格模式，即允不允许使用默认别名

(default: false)

返回值:

Injector对象.

应用场景：当 Angular的app 已经启动编译好了之后, 有时候你又想强行进入做一些逻辑或者修改，可以使用JQuery/jqLite元素的injector()方法

例子：

exampleApp.controller('exampleController',['$scope', function($scope){		
		
		$scope.name = "boyi";
		
		$scope.inject = function(){
			var $injector = angular.injector(['ng']);
			
			$injector.invoke(function($http) {
				var scopes = angular.element(document.body).scope();
				scopes.name = "博弈网络";//这里可以同http请求获得数据
			
			});
			
		};
		
	}]);

如上在conntroller 中并无注入$ http 服务但是可以通过angular.injector 获取的$injector 对象重新进行注入新的服务。

可用于测试和加载后手动注入。

11.