AngularJS | función angular.bind()

La función angular.bind() en AngularJS se usa para vincular el contexto actual a una función, pero en realidad lo ejecuta en un momento posterior. También se puede utilizar en Aplicaciones Parciales . Aplicaciones parciales es cuando quieres hacer una función pero algunos de los argumentos ya se han pasado.
Sintaxis: 
 

angular.bind(self, function, args);

Valores paramétricos: 
 

  • self: Esto se refiere al contexto en el que la función debe ser evaluada.
  • función: Se refiere a la función a enlazar.
  • args: se utiliza para enlazar previamente a la función en el momento de la llamada a la función. Es un argumento opcional.

Ejemplo 1: 
 

html

<html>
   <head>
      <title>angular.bind()</title>
      <script src=
         "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">
      </script>
   </head>
 
   <body ng-app="app" style="text-align:Center">
 
      <h1 style="color:green">GeeksforGeeks</h1>
 
      <h2>angular.bind()</h2>
 
       
<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>

Salida:  
Antes de Entrada: 
 

bind

Después de la entrada: 
 

bind

Ejemplo 2:
 

html

<html>
   <head>
      <title>angular.bind()</title>
      <script src=
          "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">
      </script>
   </head>
 
   <body ng-app="app" style="text-align:Center">
 
      <h1 style="color:green">GeeksforGeeks</h1>
 
      <h2>angular.bind()</h2>
 
      <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>

Salida:  
Antes de Entrada: 
 

bind

Después de la entrada: 
 

bind

Publicación traducida automáticamente

Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *