CODEWITHSUNDEEP
angularjs
RK6
RK6

Reputation: 423

what is the use of angular.bind in angularjs? Where to use it?

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

Upvotes: 23

Views: 26774

Answers (3)

Sulthan
Sulthan

Reputation: 130072

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!'

Upvotes: 7

Davin Tryon
Davin Tryon

Reputation: 67296

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.

Upvotes: 38

softvar
softvar

Reputation: 18435

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

Upvotes: 2

Related Questions