angular.bind在angularjs中有什么用?在哪里使用它?

时间:2022-02-19 03:34:29

what is the use of angular.bind in Angularjs. Please provide with a example. Cant understand from https://docs.angularjs.org/api/ng/function/angular.bind

Angularjs中angular.bind的用途是什么?请提供一个例子。无法从https://docs.angularjs.org/api/ng/function/angular.bind了解

4 个解决方案

#1


36  

Angular.bind is a utility function that combines functionality in function.bind and partial function application.

Angular.bind是一个实用函数,它结合了function.bind和部分函数应用程序中的功能。

Binding (in general) is the idea that you want to bind the current context to a function, but actually execute it at a later time.

绑定(通常)是您希望将当前上下文绑定到函数,但实际上稍后执行它的想法。

This can be useful in angular when making HTTP calls with $http and handling promises:

当使用$ http进行HTTP调用并处理promise时,这在角度有用:

$http.get('url').then(angular.bind(this, 
    function(response) { 
        this.response = response; //use this (which is the bound context) 
    });

In the above example, the this inside the function would not refer to the this in the $http context unless we explicitly bind it. This is a common JavaScript issue (in callbacks) because of its dynamic binding of context (which is unlike most popular class-oriented languages).

在上面的例子中,除非我们明确地绑定它,否则函数内部的this将不会引用$ http上下文中的this。这是一个常见的JavaScript问题(在回调中),因为它的上下文动态绑定(这与大多数流行的面向类的语言不同)。

Partial Application is used when you want to make a function that has already been passed some of its arguments. A very simple example:

当您想要创建已经传递了一些参数的函数时,将使用部分应用程序。一个非常简单的例子:

function add(x, y) { 
    return x + y; 
}

var add10To = angular.bind(this, add, 10);

console.log(add10To(5));
// outputs 15

With Angular.bind, the Angular team is giving both of these wrapped up together.

通过Angular.bind,Angular团队将这两者结合在一起。

#2


7  

This is one of classic functions on which functional languages are based. It allows us to work with partial functions. Note this is not angular specific, this is Javascript specific. Most utility libraries for Javascript include this function, too (e.g. Underscore/Lodash).

这是函数式语言所基于的经典函数之一。它允许我们使用部分功能。请注意,这不是特定于角度的,这是特定于Javascript的。 Javascript的大多数实用程序库也包括此函数(例如Underscore / Lodash)。

Nowadays, this function is a part of Javascript itself (supported on all major browsers - see Which browsers support bind()?).

如今,这个函数是Javascript本身的一部分(在所有主流浏览器上都支持 - 请参阅哪些浏览器支持bind()?)。

To explain what bind does, I will refer to the example in Lodash documentation (replacing the original _.bind with angular.bind and adding some comments):

为了解释bind的作用,我将参考Lodash文档中的示例(用angular.bind替换原始_.bind并添加一些注释):

//this is a simple function. Note it uses "this" but it's not inside any object.
var greet = function (greeting, punctuation) {
  return greeting + ' ' + this.user + punctuation;
};

//now let's define an object
var object = { 'user': 'fred' };

//now we can create a functions by "binding" the object with the function above and also supplying the "greeting" argument
var bound = angular.bind(object, greet, 'hi');
bound('!');
// → 'hi fred!'

#3


2  

All data in AngularJS is supposed to be a property of $scope object. The framework manages to route any ng-click to the correct scope object under the hood, without the developer thinking about this. Inside a called function, this points to the $scope object

AngularJS中的所有数据都应该是$ scope对象的属性。该框架设法将任何ng-click路由到引擎盖下的正确范围对象,而开发人员不会考虑这一点。在被调用函数内部,这指向$ scope对象

<body ng-controller="MainCtrl">
  <p ng-click="clickMe()">Click me</p>
</body>
when clicked the following controller function

app.controller('MainCtrl', function($scope) {
  $scope.clickMe = function() {
    console.log(this === $scope);
  };
});
// prints true

function.bind is not often used inside AngularJs controller code: functions that are defined inside the controller function just use $scope object to access the data instead of properties attached to this. Even functions defined inside the link function can directly work with the scope variable.

在AngularJs控制器代码中经常不使用function.bind:在控制器函数内定义的函数只使用$ scope对象来访问数据而不是附加到它的属性。即使在链接函数内定义的函数也可以直接使用范围变量。

Reference: http://bahmutov.calepin.co/why-function-bind-matters-little-in-angularjs.html

参考:http://bahmutov.calepin.co/why-function-bind-matters-little-in-angularjs.html

#4


2  

Check the following link for more insights for on this question http://learnkode.com/Examples/Angular/angular-bind

有关此问题的更多见解,请查看以下链接http://learnkode.com/Examples/Angular/angular-bind

#1


36  

Angular.bind is a utility function that combines functionality in function.bind and partial function application.

Angular.bind是一个实用函数,它结合了function.bind和部分函数应用程序中的功能。

Binding (in general) is the idea that you want to bind the current context to a function, but actually execute it at a later time.

绑定(通常)是您希望将当前上下文绑定到函数,但实际上稍后执行它的想法。

This can be useful in angular when making HTTP calls with $http and handling promises:

当使用$ http进行HTTP调用并处理promise时,这在角度有用:

$http.get('url').then(angular.bind(this, 
    function(response) { 
        this.response = response; //use this (which is the bound context) 
    });

In the above example, the this inside the function would not refer to the this in the $http context unless we explicitly bind it. This is a common JavaScript issue (in callbacks) because of its dynamic binding of context (which is unlike most popular class-oriented languages).

在上面的例子中,除非我们明确地绑定它,否则函数内部的this将不会引用$ http上下文中的this。这是一个常见的JavaScript问题(在回调中),因为它的上下文动态绑定(这与大多数流行的面向类的语言不同)。

Partial Application is used when you want to make a function that has already been passed some of its arguments. A very simple example:

当您想要创建已经传递了一些参数的函数时,将使用部分应用程序。一个非常简单的例子:

function add(x, y) { 
    return x + y; 
}

var add10To = angular.bind(this, add, 10);

console.log(add10To(5));
// outputs 15

With Angular.bind, the Angular team is giving both of these wrapped up together.

通过Angular.bind,Angular团队将这两者结合在一起。

#2


7  

This is one of classic functions on which functional languages are based. It allows us to work with partial functions. Note this is not angular specific, this is Javascript specific. Most utility libraries for Javascript include this function, too (e.g. Underscore/Lodash).

这是函数式语言所基于的经典函数之一。它允许我们使用部分功能。请注意,这不是特定于角度的,这是特定于Javascript的。 Javascript的大多数实用程序库也包括此函数(例如Underscore / Lodash)。

Nowadays, this function is a part of Javascript itself (supported on all major browsers - see Which browsers support bind()?).

如今,这个函数是Javascript本身的一部分(在所有主流浏览器上都支持 - 请参阅哪些浏览器支持bind()?)。

To explain what bind does, I will refer to the example in Lodash documentation (replacing the original _.bind with angular.bind and adding some comments):

为了解释bind的作用,我将参考Lodash文档中的示例(用angular.bind替换原始_.bind并添加一些注释):

//this is a simple function. Note it uses "this" but it's not inside any object.
var greet = function (greeting, punctuation) {
  return greeting + ' ' + this.user + punctuation;
};

//now let's define an object
var object = { 'user': 'fred' };

//now we can create a functions by "binding" the object with the function above and also supplying the "greeting" argument
var bound = angular.bind(object, greet, 'hi');
bound('!');
// → 'hi fred!'

#3


2  

All data in AngularJS is supposed to be a property of $scope object. The framework manages to route any ng-click to the correct scope object under the hood, without the developer thinking about this. Inside a called function, this points to the $scope object

AngularJS中的所有数据都应该是$ scope对象的属性。该框架设法将任何ng-click路由到引擎盖下的正确范围对象,而开发人员不会考虑这一点。在被调用函数内部,这指向$ scope对象

<body ng-controller="MainCtrl">
  <p ng-click="clickMe()">Click me</p>
</body>
when clicked the following controller function

app.controller('MainCtrl', function($scope) {
  $scope.clickMe = function() {
    console.log(this === $scope);
  };
});
// prints true

function.bind is not often used inside AngularJs controller code: functions that are defined inside the controller function just use $scope object to access the data instead of properties attached to this. Even functions defined inside the link function can directly work with the scope variable.

在AngularJs控制器代码中经常不使用function.bind:在控制器函数内定义的函数只使用$ scope对象来访问数据而不是附加到它的属性。即使在链接函数内定义的函数也可以直接使用范围变量。

Reference: http://bahmutov.calepin.co/why-function-bind-matters-little-in-angularjs.html

参考:http://bahmutov.calepin.co/why-function-bind-matters-little-in-angularjs.html

#4


2  

Check the following link for more insights for on this question http://learnkode.com/Examples/Angular/angular-bind

有关此问题的更多见解,请查看以下链接http://learnkode.com/Examples/Angular/angular-bind