23

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

RK6
  • 424
  • 1
  • 5
  • 23
  • Check the following link for more insights for on this question http://learnkode.com/Examples/Angular/angular-bind – vishwa Jul 09 '16 at 15:46

3 Answers3

38

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

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.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).

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.

Davin Tryon
  • 66,517
  • 15
  • 143
  • 132
  • i understood that in the first example of using the angular.bind() the "this" is referring to "this" in the $http but in the second example i didn't understand what the this is referring to (normally it should refer to the global context but that wouldn't be useful and that "this" maybe is the add10To object itself. Can you confirm it ? – Bardelman Feb 24 '16 at 11:18
  • 1
    @Bardelman Not exactly. In the first `this`, it is not referring to `$http`, it is referring to the function scope that the `$http.get...` line is contained within (for example, the controller). And again, the second `this` is referring to the context in which these statements and functions are defined. If there is no wrapping function, this refers to the global context. – Davin Tryon Feb 24 '16 at 12:07
  • In that case, what would be the "this" as the global scope useful for the bind to make it make a function analogue to the add function with the x passed to it as equal to 10 ? – Bardelman Feb 24 '16 at 13:23
  • It is not used for anything, so you could pass `null` instead. It is just the method signature of `bind` (it takes context as the first parameter). – Davin Tryon Feb 24 '16 at 15:18
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).

Nowadays, this function is a part of Javascript itself (supported on all major browsers - see Which browsers support 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):

//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!'
Community
  • 1
  • 1
Sulthan
  • 128,090
  • 22
  • 218
  • 270
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

<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.

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

softvar
  • 17,917
  • 12
  • 55
  • 76