Open In App

AngularJS angular.bind() Function

Improve
Improve
Like Article
Like
Save
Share
Report

The angular.bind() Function in AngularJS is used to bind the current context to a function, but actually, execute it at a later time. It can also be used in Partial Applications. Partial Application is when you want to make a function but some of the arguments have been passed already.

Syntax:

angular.bind(self, function, args);

Parameter Values:

  • self: This refers to the context in which the function should be evaluated.
  • function: It refers to the function to be bound.
  • args: It is used to prebound to the function at the time of the function call. It is an optional argument.

Example 1: This example describes the implementation of the angular.bind() Function in AngularJS.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>angular.bind()</title>
    <script src=
    </script>
</head>
 
<body ng-app="app" style="text-align:Center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>angular.bind()</h3>
    <p>Input number to sum with 5:
    <div ng-controller="geek">
        <input type="number" ng-model="num" ng-change="Func()" />
        <br>Sum = {{Add}}
    </div>
 
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['$scope', function ($scope) {
            $scope.num = 0;
            $scope.Func = function () {
                var add = angular.bind(this, function (a, b) {
                    return a + b;
                });
                $scope.Add = add(5, $scope.num);
            }
        }]);
 
    </script>
</body>
</html>


Output:

 

Example 2: This is another example that describes the implementation of the angular.bind() Function in AngularJS.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>angular.bind()</title>
    <script src=
    </script>
</head>
 
<body ng-app="app" style="text-align:Center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>angular.bind()</h3>
    <div ng-controller="geek">
        Input A:
        <input type="number"
               ng-model="val1"
               ng-change="GetResult()" />
        <br><br>
        Input B:
        <input type="number"
               ng-model="val2"
               ng-change="GetResult()" />
        <br /><br>
        {{result}}
    </div>
 
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['$scope', function ($scope) {
            function isEqual(a, b) {
                if (a == b) {
                    return "Inputs are equal."
                }
                else if (a >= b) {
                    return "A is greater than B."
                }
                else if (a <= b) {
                    return "A is lesser than B."
                }
            }
            $scope.GetResult = function () {
                var result = angular.bind(this, isEqual);
                $scope.result = result($scope.val1, $scope.val2);
            }
        }]);
    </script>
</body>
</html>


Output:

 



Last Updated : 12 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads