angular.bind使用心得

 更新时间:2015年10月26日 08:56:31   投稿:hebedich  
这篇文章主要介绍了angular.bind使用心得,以及个人对于angular.bind的理解,这里分享给大家,希望大家能够喜欢。

angular.bind

解释:返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能。

格式:angular.bind(self,fn,args);

self:object  对象; fn的上下文对象,在fn中可以用this调用

fn:function; 绑定的方法

args:传入fn的参数

  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!!!
  var t = angular.bind(obj, fn);
  t("ugly");// Any is a boy!!! And he is ugly!!!

接下来说说对angular.bind的理解吧~

bind顾名思义绑定的意思,那么假如我们要把A绑到B上,那么必须又有A和B这2个存在体。这里需要的2个存在体就一个对象和一个函数。那么怎么绑?@野兽的理解是把对象“绑”到函数的this上去执行,这时候fn的this就等于obj了,至于第三个参数,可有可无,看需求,如果函数需要传入参数,那么我们可以把angular.bind的第三个参数放上去,这就是传入fn函数的参数了。

案例中第一种写法是定义绑定的时候就把fn所需的参数传进去了,调用的时候直接用,而案例中第二种写法是先绑定,在调用执行的时候再给fn传参,效果是一样的

对于那上面的英文句子(好吧,虽然只有2句),如果有写错了,那么说明深深的爱着我们的母语-中文;如果一不小心写对了,那么请为这个装的66666的B鼓掌~

文章最后,我们来看个实例吧

<!DOCTYPE HTML>
<html ng-app>
<head>
</head>
<script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
</body>
<script>
   
 var self = {name:'boyi'};
 
 //示例1--带参数
 var f = angular.bind(self, //绑定对象,作为函数的上下文
  //被绑定的函数
  function(age){ 
   alert(this.name + ' is ' + age + ' !');
  },
  //绑定的参数,可省略
  '15'
 );
 f();//调用绑定之后的function
  
 //示例2--不带参数
 var m = angular.bind(self, //绑定对象,作为函数的上下文
  //被绑定的函数
  function(age){ 
   alert(this.name + ' is ' + age + ' !');
  }
  //省略参数
 );
  
 m(3);//调用传参的函数		
 
</script>

</body>	
</html>

相关文章

  • AngularJS 所有版本下载地址

    AngularJS 所有版本下载地址

    这篇文章主要介绍了 AngularJS 所有版本下载地址的相关资料,需要的朋友可以参考下
    2016-09-09
  • AngularJS指令详解及示例代码

    AngularJS指令详解及示例代码

    本文主要介绍AngularJS指令,这里整理了简单的指令并附示例代码,有需要的小伙伴可以参考下
    2016-08-08
  • AngularJS 过滤与排序详解及实例代码

    AngularJS 过滤与排序详解及实例代码

    这篇文章主要介绍了AngularJS 过滤与排序,这里整理了详细的资料及简单实例代码,有需要的小伙伴可以参考下
    2016-09-09
  • AngularJS实现的锚点楼层跳转功能示例

    AngularJS实现的锚点楼层跳转功能示例

    这篇文章主要介绍了AngularJS实现的锚点楼层跳转功能,涉及AngularJS事件响应实现锚点跳转功能的相关操作技巧,需要的朋友可以参考下
    2018-01-01
  • Angular实现form自动布局

    Angular实现form自动布局

    这篇文章主要介绍了Angular实现form自动布局的相关资料,以代码片段的形式分析了Angular实现form自动布局的实现方法,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • Angular的模块化(代码分享)

    Angular的模块化(代码分享)

    本文主要对Angular的模块化进行案例分析介绍,具有一定的参考价值,下面跟着小编一起来看下吧
    2016-12-12
  • 详解AngularJS验证、过滤器、指令

    详解AngularJS验证、过滤器、指令

    这篇文章主要介绍了AngularJS验证、过滤器、指令的相关知识,angularJS中提供了许多的验证指令,可以轻松的实现验证,具体详情大家通过本文一起学习吧,需要的朋友可以参考下
    2017-01-01
  • Angular2.0/4.0 使用Echarts图表的示例代码

    Angular2.0/4.0 使用Echarts图表的示例代码

    本篇文章主要介绍了Angular2.0/4.0 使用Echarts的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • AngularJS入门教程之过滤器用法示例

    AngularJS入门教程之过滤器用法示例

    这篇文章主要介绍了AngularJS过滤器用法,结合实例形式简单的分析了AngularJS过滤器的功能及基本用法,并举例说明了自定义过滤器的实现技巧,需要的朋友可以参考下
    2016-11-11
  • AngularJS学习笔记之表单验证功能实例详解

    AngularJS学习笔记之表单验证功能实例详解

    这篇文章主要介绍了AngularJS学习笔记之表单验证功能,结合实例形式分析了AngularJS针对表单的校验、监控等相关操作技巧,需要的朋友可以参考下
    2017-07-07

最新评论