Menu
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
924
The ng-bind directive tells AngularJS to replace the content of an HTML element with the value of a given variable, or expression. If the value of the given variable, or expression, changes, the content of the specified HTML element will be changed as well.
You can use bind() to create a function bound to an object. This way no matter when and how it's called, it's called with the object it is tied to. An example from earlier does exactly this.
We use the Bind() method to call a function with the this value, this keyword refers to the same object which is currently selected . In other words, bind() method allows us to easily set which object will be bound by the this keyword when a function or method is invoked.
bind() is used when you need to pass a callback (e.g. some sort of function reference), but you want the caller to call your function with a specific this value.
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.
67
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!' 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
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
