1. casa
  2. Domanda e risposta
  3. a cosa serve angular.bind in angularjs? Dove usarlo?

a cosa serve angular.bind in angularjs? Dove usarlo?

2015-05-29 10 views

risposta

36

Angular.bind è una funzione di utilità che combina funzionalità in function.bind e partial function application.

L'associazione (in generale) è l'idea che si desidera associare il contesto corrente a una funzione, ma in realtà eseguirla in un secondo momento.

Questo può essere utile in angolare quando si effettua HTTP chiamate con $http spedizione promesse:

$http.get('url').then(angular.bind(this, 
    function(response) { 
     this.response = response; //use this (which is the bound context) 
    });

Nell'esempio precedente, il this all'interno della funzione sarebbe non riferimento al this nel $http contesto meno abbiamo esplicitamente bind it. Questo è un problema JavaScript comune (nei callback) a causa del suo legame dinamico di contesto (che è a differenza della maggior parte dei linguaggi di classe più popolari).

applicazione parziale viene utilizzato quando si vuole fare una funzione che è già stato superato alcune dei suoi argomenti. Un esempio molto semplice:

function add(x, y) { 
    return x + y; 
} 

var add10To = angular.bind(this, add, 10); 

console.log(add10To(5)); 
// outputs 15

Con Angular.bind, il team Angular sta dando entrambi questi pacchetti.

fonte

2015-05-29 13:04:01

+0

ho capito che nel primo esempio di utilizzo di angular.bind() il "this" si riferisce a "this" in $ http ma nel secondo esempio non ho capito a cosa si riferisce (normalmente dovrebbe fare riferimento al contesto globale, ma ciò non sarebbe utile e che "questo" potrebbe essere l'oggetto add10To stesso. Puoi confermarlo? – Bardelman

+1

@Bardelman Non esattamente. Nel primo 'questo', non si riferisce a' $ http ', si riferisce all'ambito della funzione che la riga' $ http.get ... 'è contenuta all'interno (ad esempio, il controller). E ancora, il secondo' this' si riferisce al contesto in cui queste dichiarazioni e Se non esiste alcuna funzione di avvolgimento, questo si riferisce al contesto globale –

+0

In tal caso, quale sarebbe il "questo" come ambito globale utile per il bind per farlo rendere una funzione analoga alla funzione di addizione con la x passata ad essa pari a 10? – Bardelman

2

Tutti i dati in AngularJS dovrebbero essere una proprietà dell'oggetto $ scope. Il framework riesce a instradare qualsiasi ng-click all'oggetto di ambito corretto sotto il cofano, senza che lo sviluppatore pensi a questo. All'interno di una funzione chiamata, questa punta all'oggetto $ portata

<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 non è spesso usato all'interno AngularJs controllore codice: funzioni che sono definite all'interno della funzione regolatore basta usare $scope oggetto per accedere ai dati invece di proprietà associate Questo. Anche le funzioni definite all'interno della funzione di collegamento possono funzionare direttamente con la variabile scope.

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

fonte

2015-05-29 13:00:27 softvar

7

Questa è una delle funzioni classiche su cui si basano i linguaggi funzionali. Ci consente di lavorare con funzioni parziali. Nota che questo non è specifico angolare, questo è specifico di Javascript. La maggior parte delle librerie di utilità per Javascript include anche questa funzione (ad esempio Underscore/Lodash).

Al giorno d'oggi, questa funzione è una parte di JavaScript stesso (supportata su tutti i principali browser - vedi Which browsers support bind()?).

Per spiegare cosa bind fa, farò vedere l'esempio nella documentazione Lodash (che sostituisce l'originale _.bind con angular.bind e l'aggiunta di alcuni commenti):

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

fonte

2015-05-29 13:12:53 Sulthan

Problemi correlati

 Problemi correlati