Home Web Front-end JS Tutorial angular.bind usage experience_AngularJS

angular.bind usage experience_AngularJS

May 16, 2016 pm 03:35 PM

angular.bind

Explanation: Returns a function fn that calls self (self represents this in fn). Parameters args (*) can be provided to fn. This function is also called a local operation to distinguish the function.

Format: angular.bind(self,fn,args);

self: object object; the context object of fn, which can be called with this in fn

fn: function; binding method

args: parameters passed into 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!!!

Copy after login

Let’s talk about our understanding of angular.bind~

bind means binding as the name suggests, so if we want to bind A to B, then there must be two entities, A and B. The two entities needed here are an object and a function. So how to tie it? @Beast's understanding is to "tie" the object to this of the function for execution. At this time, this of fn is equal to obj. As for the third parameter, it is optional. It depends on the requirements. If the function needs to pass in parameters, then we You can put the third parameter of angular.bind, which is the parameter passed into the fn function.

The first way of writing in the case is to pass the parameters required by fn when defining the binding, and use it directly when calling. The second way of writing in the case is to bind first and then use it when calling and executing. Passing parameters to fn has the same effect

For the English sentences above (well, even though there are only 2 sentences), if there are any mistakes, it means that we deeply love our mother tongue - Chinese; if you accidentally wrote it correctly, then please support this Applause to B who pretends to be 66666~

At the end of the article, let’s take a look at an example

<!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>
Copy after login

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Replace String Characters in JavaScript Replace String Characters in JavaScript Mar 11, 2025 am 12:07 AM

Replace String Characters in JavaScript

Custom Google Search API Setup Tutorial Custom Google Search API Setup Tutorial Mar 04, 2025 am 01:06 AM

Custom Google Search API Setup Tutorial

Example Colors JSON File Example Colors JSON File Mar 03, 2025 am 12:35 AM

Example Colors JSON File

8 Stunning jQuery Page Layout Plugins 8 Stunning jQuery Page Layout Plugins Mar 06, 2025 am 12:48 AM

8 Stunning jQuery Page Layout Plugins

10 jQuery Syntax Highlighters 10 jQuery Syntax Highlighters Mar 02, 2025 am 12:32 AM

10 jQuery Syntax Highlighters

Build Your Own AJAX Web Applications Build Your Own AJAX Web Applications Mar 09, 2025 am 12:11 AM

Build Your Own AJAX Web Applications

What is 'this' in JavaScript? What is 'this' in JavaScript? Mar 04, 2025 am 01:15 AM

What is 'this' in JavaScript?

10  JavaScript & jQuery MVC Tutorials 10 JavaScript & jQuery MVC Tutorials Mar 02, 2025 am 01:16 AM

10 JavaScript & jQuery MVC Tutorials

See all articles